Question

我有一组选择，但是希望它们都与v模型一起工作，而不为它们创建单独的数据属性。

在示例中，选择1和选择2是一个组，选择3和选择4是另一个组。当一个选择项选择1时，预期的行为应该是它不会影响选择项2等。

我的猜测可能是对此的计算属性？但无法正确实施

代码段：

new Vue({
  el: '#app',
  template: `
        <div>
            Select 1: <select v-model="selectedPerson">
                <option v-for="person in people" :value="person.key">{{person.name}}</option>
            </select>
            Select 2: <select v-model="selectedPerson">
                <option v-for="person in people" :value="person.key">{{person.name}}</option>
            </select>
            <h4>Selected 1 person key : {{selectedPerson}}</h4>
             <h4>Selected 2 person key: {{selectedPerson}}</h4>
            
            <br/>
                       Select 3: <select v-model="selectedPersonTwo">
                <option v-for="person in people" :value="person.key">{{person.name}}</option>
            </select>
            Select 4: <select v-model="selectedPersonTwo">
                <option v-for="person in people" :value="person.key">{{person.name}}</option>
            </select>
            <h4>Selected 3 person Two key: {{selectedPersonTwo}}</h4>
            <h4>Selected 4 person Two key: {{selectedPersonTwo}}</h4>
        </div>
    `,
  data: {
    people: [{
        key: 1,
        name: "Carl"
      },
      {
        key: 2,
        name: "Carol"
      },
      {
        key: 3,
        name: "Clara"
      },
      {
        key: 4,
        name: "John"
      },
      {
        key: 5,
        name: "Jacob"
      },
      {
        key: 6,
        name: "Mark"
      },
      {
        key: 7,
        name: "Steve"
      }
    ],
    selectedPerson: "",
    selectedPersonTwo: ""
  }
});

.required-field > label::after {
  content: '*';
  color: red;
  margin-left: 0.25rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<body>
  <div id="app"></div>
</body>

Answer 1

在我看来，您想使用双向绑定，但是在中间它们之间要有更多的控制权。我的建议是：

请勿使用<select v-model="selectedPerson">
相反，将它们拆分为<select :value="selectedPersonValue" @input="selectedPersonOutput>（基本上是同一件事，但是您可以指定不同的输入和输出），其中selectedPersonValue可以是{{1}中的计算属性或常规属性}和data()应该是在选择值更改时将被调用的方法。

这样，您可以直接决定每个步骤会发生什么。

PS：如果您想通过一种方法来影响属性selectedPersonOutput，则可以考虑将其更改为selectedPersonValue属性，并为其添加监视。看看最适合您的东西。

如何动态使用v模型和v选择

1 个答案: