javascript - 如何控制这些组件？

Question

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

这是我想要实现的:

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

• 如果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 组件，每当我打开或关闭其中一个时，其他 2 个就会随之而来(这不是我想要做的)。

我非常感谢有关此的任何帮助。

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;
    }
  }
}

不确定还要添加什么。主要是观察变化并对其使用react。