3

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

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

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

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

代码片段：

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>

4

1 回答 1

0

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

  • 不使用<select v-model="selectedPerson">
  • Instead split them to <select :value="selectedPersonValue" @input="selectedPersonOutput>(which is basically the same thing, but you can specify different input and outputs), where selectedPersonValuecan be a computed property or a regular property in data(), and selectedPersonOutputshould be a method that will be called when select value changes.

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

PS：如果你想selectedPersonValue从一个方法中影响你的属性，你可以考虑将其更改为data()属性并添加一个手表。看看什么最适合你。

于 2018-07-06T08:18:35.887 回答