如何控制这些组件？ [英] How to control these components?

问题描述

我有5个

以下是一些代号：

 < div id =app> 
< v-app id =inspire> 
< v-container fluid> 
< p> {{people}}< / p> 
< v-switch v-model =peoplelabel =Avalue =A>< / v-switch> 
< v-switch v-model =peoplelabel =Bvalue =B>< / v-switch> 
< v-switch v-model =peoplelabel =Cvalue =C>< / v-switch> 
< v-switch v-model =peoplelabel =Dvalue =D>< / v-switch> 
< v-switch v-model =peoplelabel =Evalue =E>< / v-switch> 
< / v-container> 
< / v-app> 
< / div> 
  

JS代码：

 新的Vue（{
 el：'＃app'，
 data（）{
 return {
 people：[] 
} 
} 
}）
  

如果我设置值支持A，D和E组件，每当我打开或关闭其中一个时，其他2个跟随（这不是我想要做的）。

我真的很感激任何帮助。

解决方案

这是你想要什么？ codepen （或者更干净： codepen ）

 < v-switch v-for =（人，我）人
：key =person.label
 v-model =people [i] .value
：label =people [i] .label
：disabled =people [i] .disabled
>< / v-switch> 
 
人：[
 {值：false，标签：A，禁用：false}，
 // ... 
 
创建（ ）{
 //这里我们观察D和E的变化，如果D和E都是ON 
，则将A设置为真。$ watch（
 vm => vm.people [ 3] .value&& vm.people [4] .value，（newVal，oldVal）=> {
 if（newVal）{
 this.people [0] .value = true; 
} 
}）; 
}，
观看：{
people.0.value（newVal）{
 if（newVal）{//如果A打开
 //打开D和E，并禁用它们
 this.people [3] .value = true; 
 this.people [4] .value = true; 
 this.people [3] .disabled = true; 
 this.people [4] .disabled = true; 
} else {//如果A关闭
 //启用D和E 
 this.people [3] .disabled = false; 
 this.people [4] .disabled = false; 
} 
} 
} 
  

不确定还要添加什么。基本上注意变化并做出反应。

I have 5 v-swtich components, called A, B, C, D and E.

Here is what I want to achieve:

• If I switch on A, then D and E must automatically switch on, and the user must not be able to switch D and E off unless if he switches off A.

• If A is not switched on, the the user can switch on D or E.

• If the user switches on any combinations where D and E appear (for example: (C, D, E), (C, D, E, B), (B, D, E) ) then A must be automatically switched on, and the user must not switch off D and E until he switches off A.

Here is some code to start with:

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

The JS code:

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

If I set the value prop to A, D and E components, whenever I toggle one of them on or off, the 2 others follow (and that is not what I want to do).

I really appreciate any help regarding this.

解决方案

Is this what you wanted? codepen (or perhaps cleaner: 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;
    }
  }
}

Not sure what else to add. Basically watch for changes and react on them.

这篇关于如何控制这些组件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！