如何控制这些组件？

Question

我有5个v-swtich组件，分别称为A，B，C，D和E。

这是我要实现的目标：

• 如果我打开 A ，则 D 和 E 必须自动打开，并且用户不能除非他关闭A，否则请关闭D和E。

• 如果未打开 A ，则用户可以打开 D 或 E 。

• 如果用户打开出现D和E的任何组合（例如：（C， D ， E ），（C， D ， E ，B），（B， D ， E ）），则必须自动打开A，并且用户不得关闭D和E，直到他关闭A。

以下是一些以以下代码开头的代码：

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <p>{{ people }}</p>
      <v-switch v-model="people" label="A" value="A"></v-switch>
      <v-switch v-model="people" label="B" value="B"></v-switch>
      <v-switch v-model="people" label="C" value="C"></v-switch>
      <v-switch v-model="people" label="D" value="D"></v-switch>
      <v-switch v-model="people" label="E" value="E"></v-switch>
    </v-container>
  </v-app>
</div>

JS代码：

new Vue({
  el: '#app',
  data () {
    return {
      people: []
    }
  }
})

如果我将value道具设置为A，D和E组件，则每当我打开或关闭其中一个组件时，就会跟随其他两个组件（这不是我想要的）。

非常感谢您对此提供的任何帮助。

Answer 1

这是您想要的吗？ codepen（或者更干净的codepen）

<v-switch v-for="(person, i) in people" 
  :key="person.label"
  v-model="people[i].value"
  :label="people[i].label"
  :disabled="people[i].disabled"
></v-switch>

people: [
  { value: false, label: "A", disabled: false },
//...

created() {
// here we watch for D and E changes, and set A to true if both D and E are ON
this.$watch(
  vm => vm.people[3].value && vm.people[4].value, (newVal, oldVal) => {
    if(newVal) {
      this.people[0].value = true;
    }         
  });
},
watch: {
  "people.0.value"(newVal) {
    if (newVal) { // if A is turned ON
      // turn D and E on, and disable them
      this.people[3].value = true;
      this.people[4].value = true;
      this.people[3].disabled = true;
      this.people[4].disabled = true;
    } else { // if A is turned OFF
      // enable D and E
      this.people[3].disabled = false;
      this.people[4].disabled = false;
    }
  }
}

不确定要添加的内容。基本上观察变化并对变化做出反应。

Answer 2

使用computed getters/setters提供了一种使用逻辑备份视图属性的方法。 Vue不会直接链接到data，而是会使用提供的任何逻辑调用计算方法。

问题的第二部分是禁用按钮。这可以通过v-switch disabled属性来实现：

<v-switch
  :disabled="computedPropertyToDisable"
  v-model="computedPropertyForValue"
  ...
</v-switch>