Как использовать v-модель и v-select динамически

Question

Как использовать v-модель и v-select динамически

У меня есть группа выбора, но я хочу, чтобы они все по-другому работали с v-моделью, не создавая отдельных свойств данных для них всех.

В этом примере выберите 1 и выберите 2 для одной группы, выберите 3 и выберите 4 для другой. Когда один выбирает select 1, ожидаемое поведение должно быть таким, оно не влияет на select 2 и т. Д.

Я думаю, может быть вычисленное свойство для этого? но не могу разобраться в правильной реализации

Js fiddle: 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>

3

javascript vue.js vue-component v-model v-select

Источник

user851056 06 июл '18 в 08:09

1 ответ

Другие вопросы по тегам javascript vue.js vue-component v-model v-select

user3429015 06 июл '18 в 08:18 2018-07-06 08:18 · Answer 1 · 2018-07-06 08:18

Мне кажется, что вы хотели бы использовать двустороннее связывание, но с большим контролем между ними в середине. Мое предложение будет:

Не использовать <select v-model="selectedPerson">
Вместо этого разделите их на <select :value="selectedPersonValue" @input="selectedPersonOutput> (что в основном то же самое, но вы можете указать разные входы и выходы), где selectedPersonValue может быть вычисляемым свойством или обычным свойством в data(), а также selectedPersonOutput должен быть методом, который будет вызываться при изменении значения выбора.

Таким образом, вы можете напрямую решить, что происходит на каждом этапе.

PS: если вы хотите повлиять на вашу собственность selectedPersonValue от метода, вы могли бы рассмотреть вопрос об изменении его на data() собственности и добавить часы к нему. Посмотрите, что работает лучше для вас.