如何动态使用 v-model 和 v-select答案

【问题标题】：How to use v-model and v-select dynamically如何动态使用 v-model 和 v-select
【发布时间】：2018-12-14 18:58:21
【问题描述】：

我有一组选择，但希望它们都以不同的方式使用 v-model 而不为它们创建单独的数据属性。

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

我的猜测可能是这个的计算属性？但无法理解正确的实施方式

Js 小提琴：https://jsfiddle.net/uxn501h2/8/

代码sn-p：

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>

【问题讨论】：

我并不完全清楚你希望这两个组如何交互，但它们都在一个数组上工作，你的问题与this one 非常相似。我的建议是将问题分为 1. STORE、2. 计算属性和接口。在您的商店中，您的 people 数组应该代表界面的整个状态 - 谁被选中以及在哪个组中。然后根据需要创建计算属性。
@bbsimonbb 查看示例。不知道我该如何解释，但数组的想法和示例似乎是合理的，会更新

标签： javascript vue.js vue-component v-model v-select

【解决方案1】：

在我看来，您希望使用双向绑定，但在中间有更多控制权。我的建议是：

不要使用<select v-model="selectedPerson">
而是将它们拆分为<select :value="selectedPersonValue" @input="selectedPersonOutput>（这基本上是一样的，但你可以指定不同的输入和输出），其中selectedPersonValue可以是data()中的计算属性或常规属性，selectedPersonOutput应该是选择值更改时将调用的方法。

这样你就可以直接决定每一步会发生什么。

PS：如果你想通过一个方法影响你的属性selectedPersonValue，你可以考虑把它改成data()属性并添加一个watch。看看什么最适合你。

【讨论】：

感谢您的意见。我的猜测是最好的实现是使用我提到的计算属性。您介意提供一个经过调整的工作示例吗？
@nara_l 我只能告诉你门 :) 你是必须穿过它的人。