道招

支持取消单选组件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保留格式翻译选区内容及预览(一)

相关文章

从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+wordpress做后端

目前正在利用闲暇时捯饬一下自己的博客,毕竟这么久没有维护了,wordpress是可以用restful API来获取数据的,决定前端用vue实现,目前正在尝试中,今天做了其中很小的一部分,就是博客目录 阅读更多…

用在线IDE写vue代码

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

React router用hooks读取routeName、根据routeName跳转

在迁移Vue至React的过程中遇到了一些路由相关的问题,在Vue项目中经常会使用routeName,毕竟使用path太长了,也记不住,我自己看了看React router也没有发现routeNam 阅读更多…

element-ui表单源码解析之el-input

关于表单校验el-input做的主要工作就是跟el-form-item交互,把input的相关事件发送给el-form-item,上一篇已经讲到在el-form-item的mounted的生命周期里 阅读更多…

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