道招

支持取消单选组件vue版

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

支持取消单选组件vue版

原生的单选就是<input type="radio"/>,正常情况在name相同的单选之间只能选一个,如果只有一个单选框的情况下,一经选中是无法自己取消的,和checkbox不一样。但是有时我们的需求是需要有一个radio,并且还要支持能选中和取消的。 当radio的被选中的时候,其实它的checked属性是true,取消时为false。并且如果直接设置checked属性的值也能直接改变radio的选中与否。 我们也可以依此写成个简单的vue组件。

<template>
  <input
    type="radio"
    :id="label"
    ref="radio"
    @click="onClick"
    :value="innerChecked"
  />
</template>
<script>
export default {
  name: 'RadioToggle',
  props: {
    value: Boolean,
    label: String
  },
  data() {
    return {
      innerChecked: false
    };
  },
  mounted() {
    this.innerChecked = this.value;
  },
  methods: {
    onClick() { // 支持单个单选框选中/取消相互切换,选中态与isChecked保持一致
      this.innerChecked = !this.innerChecked;
    },
    updateCheck() {
      this.$refs.radio.checked = this.innerChecked;
      this.$emit('input', this.innerChecked);
    },
  },
  watch: {
    value() {
      this.innerChecked = !!this.value;
    },
    innerChecked() {
      this.updateCheck();
    }
  }
}
</script>

一个简单的vue双向绑定组件就完成了。

更新时间:
上一篇:真的会用addEventListener吗,别掉到坑里了下一篇:Javascript保留格式翻译选区内容及预览(一)

相关文章

vue-cli设置css不生效

我们有的项目使用的是老的vue-cli脚手架生成的,今天想写点东西,发现.vue文件里面 style 里面写的样式都不生效了,很自然就想到是不是loader的问题。 在这种项目的webpack.ba 阅读更多…

vue内置组件keep-alive源码解析

很简单,我们直接看vue的源码即可。 keep-alive 组件支持三个属性。 props: { include: patternTypes, exclude: patter 阅读更多…

从vuecli3学习webpack记录(一)vue-cli-serve机制

最近看了看vuecli3,把自己的学习记录下来。 首先看入口 npm run dev 即是 vue-cli-service serve ,之所以能运行 vue-cli-service 命令,就是 阅读更多…

项目Vue转成React hooks可能存在的问题--急需类似setState回调

假设在Vue中有如下三个方法,并且初始时 this.a = ‘a’; this.b = ‘b’; funA() { this.a = &#039;1221&#03 阅读更多…

vue多语言的解决方案不只是 vue-i18n,前端+后端完整解决方案

网上搜很多vue多语言的,一般都是介绍vue-i18n怎么使用,当然这是不错的,但是我们如果只是讲这个的话,只是解决了静态文字的多语言化。 这一部分我们也简单讲一下 npm install 阅读更多…

Vue在chrome44偶现点击子元素事件无法冒泡

公司的一个项目大致是这样的:一个左侧列表,点击左侧列表的文章标题,右侧展开该文章对应的内容的。 现在的问题出现在极少部分客户有时左侧的标题,无法打开对应的右侧的内容,给人的改进就是‘卡’、点不动、点 阅读更多…

关注道招网公众帐号
友情链接
消息推送
道招网关注互联网,分享IT资讯,前沿科技、编程技术,是否允许文章更新后推送通知消息。
允许
不用了