Fatal编程技术网
  • javascript/
  • Javascript 行为类似Radiobutton的Vue.js组件

Javascript 行为类似Radiobutton的Vue.js组件

javascript vue.js

Javascript 行为类似Radiobutton的Vue.js组件,javascript,components,vue.js,Javascript,Components,Vue.js,我有以下Vue.js组件，它们基本上应该具有类似radiobutton的行为： // Parent Component <template> <child-component v-for="element in elements" </child-component> </template> <script> import ChildComponent from './Child.vue' export default {

我有以下Vue.js组件，它们基本上应该具有类似radiobutton的行为：

// Parent Component
<template>
  <child-component
    v-for="element in elements"
  </child-component>
</template>

<script>
import ChildComponent from './Child.vue'

export default {
  components: {
    ChildComponent
  },
  props: {
    elements: Array
  },
  methods: {
    activate(e) {
      for (let i of this.$children) {
        i.active = false;
      }

      if (e < this.$children.length) {
        this.$children[e].active = true;
      }
    }
  }
}
</script>

//父组件

请看一下双向绑定：

这允许您在两个方向上同步属性的值，这意味着父级或子级有权更改变量。然后，您可以监视父级上的更改并相应地更新


我认为一个更好的选择是创建一个RadioSet组件，该组件将包含许多单选按钮。这将消除您对家长必须使用
activate（）
方法的担忧。您只需传入一个对象，该对象具有一系列可用于生成按钮的
id
和
值。
查看双向绑定：

这允许您在两个方向上同步属性的值，这意味着父级或子级有权更改变量。然后，您可以监视父级上的更改并相应地更新

我认为一个更好的选择是创建一个RadioSet组件，该组件将包含许多单选按钮。这将消除您对家长必须使用
activate（）
方法的担忧。您只需传入一个对象，其中包含一系列可用于生成按钮的
id
和
值


// Child Component
<template>
  {{active}}
</template>

<script>
export default {
  props: {
    active: Boolean
  }
}
</script>