道招

支持取消单选组件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转成React hooks可能存在的问题--急需类似setState回调

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

命令式组件Message、Dialog的主流写法分析

这里还是以element-ui为例,那我们就看看里面的Message。 它的dom结构什么的就写在node-modules/element-ui/packages/notification/src/ 阅读更多…

邮箱收件人组件(vue版)成长历程(一)

前期项目中需要优化原始的收件人、抄送、密送部分,换成更加现代化的样式和用户,当时将这部分抽象成一个组件了,最近的需求是发件人也要使用该组件,鉴于发件人比收件人等需要校验的地方和交互习惯变动点较多,进 阅读更多…

Vue同一路由跳转页面不刷新解决方案及注意事项之二

之前写过一个 《Vue同一路由跳转页面不刷新解决方案及注意事项》 ,在这篇文章里面鞋到了怎么解决这个问题,具体内容可以点击查看,这里简单说一下,就是利用将时间戳传给路由的query,也就导致 $ro 阅读更多…

用个数组来理解vue的diff算法(一)

原文地址: 道招网 的 用个数组来理解vue的diff算法(一) Vue使用的diff算法,我相信用vue的估计都听过,并且看到源码的也不在少数。 先对下面的代码做下说明: 由于这里用 阅读更多…

用在线IDE写vue代码

上周末无意中发现了一个新的在线IDE,网址glitch.com,个人感觉很不错,于是顺便关注了下其它的在线IDE,比如codesandbox.io也不错,没有细看,可能自己已经先入为主的喜欢上glit 阅读更多…

关注道招网公众帐号
道招开发者二群