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

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

0 голосов
/ 06 июля 2018

У меня есть группа выборок, но я хочу, чтобы все они работали по-разному с 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>

1 Ответ

0 голосов
/ 06 июля 2018

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

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

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

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

...