小编Tom*_*Tom的帖子

带有动态单选按钮列表的 Vue.js v-model

我正在尝试制作一个可重用的 vue 单选按钮组件,该组件将采用变量名称和包含标签和值的对象,然后使用 v-for 呈现单选按钮列表。

我在每一半问题上都取得了成功,但没有设法将它们结合起来:

  1. 我可以将一组单选按钮绑定到数据模型,其中按钮在模板中静态定义,但我不知道如何使列表动态化。这是代码:

//component
const Radio = {
	template: '#test',
  prop: ['value'],
  data () {
    return {
      selected: this.value
    }
  },
  model: {
	  prop: 'value',
      event: 'change'
  },
  methods: {
    handleClickInput (e) {
      this.$emit('change', this.selected)
    }
  }
}

//app
var app2 = new Vue({
  el: '#app2',
  data: { 	
  		door: '',
			doorOptions: {
				'Yes': 1,
				'No': 0,
			}
	},
  components: { Radio, }
})
Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app2">
  <radio v-model="door"></radio>
  <p>
    door = {{door}}
  </p>
</div>


<template …
Run Code Online (Sandbox Code Playgroud)

radio-button vue.js v-model vue-directives

4
推荐指数
1
解决办法
1万
查看次数

标签 统计

radio-button ×1

v-model ×1

vue-directives ×1

vue.js ×1