Вывести выбранное значение для определенной карты или элемента в vuejs? - PullRequest
Новая
       24

Вывести выбранное значение для определенной карты или элемента в vuejs?

0 голосов
/ 05 июня 2018

Я показываю разные карточки с изображением и элементом ввода. 

      <v-layout row wrap v-for="card in cards" :key="card.id">
        <v-flex xs12>
          <v-card width=500px>            
            <v-flex row xs2 class="py-3">
              <img :src="card.src" >
              <input type="search" v-model="search"
                 style="width:85px; border: 1px solid;"
                 placeholder="feel" list="choose" @change="input(search, card.id)" >
                <datalist id="choose">
                  <option v-for="source in filteredInput" :value="source" :key="source"></option>
                </datalist>
             </v-flex>
           </v-card>
        </v-flex>
      </v-layout>

Проблема в том, что если я выбираю значение для card1, оно отражает одинаковое значение для всех карточек без их выбора.Я хочу отобразить значения ввода на основе ввода, введенного клиентом для этой конкретной карты.

https://jsfiddle.net/eywraw8t/62401/

Ответы [ 2 ]

0 голосов
/ 05 июня 2018

Как указано выше, вы привязываете переменную 'search' ко всем карточкам, что является причиной вашей проблемы.Чтобы исправить это, просто измените входное свойство v-model на ie "card.value".Теперь значение каждой карты хранится отдельно.

https://jsfiddle.net/bhr0d69q/

<input type="search" v-model="card.value" style="width:85px; border: 1px solid;" placeholder="feel" list="choose" @change="input(card.value, card.id)">
0 голосов
/ 05 июня 2018

Итак, я исправил проблему с v-моделью, которая у вас возникла.Вам нужно будет найти способ сохранить текущий идентификатор и получить значение из поиска.

Я использовал массив в качестве модели ранее.В таких ситуациях он работает очень хорошо.

https://jsfiddle.net/cgfhjmoy/1/

<div id="app">
  <v-layout row wrap v-for="(card, index) in cards" :key="card.id">
        <v-flex xs12>
          <v-card width=500px>            
            <v-flex row xs2 class="py-3">
              <img :src="card.src" height="100px" width="100px">
              <input type="search" v-model="search[index]"
                 style="width:85px; border: 1px solid;"
                 placeholder="feel" list="choose" @change="input(search[index], card.id)" >
                <datalist id="choose">
                  <option v-for="source in filteredInput" :value="source" :key="source"></option>
                </datalist>
             </v-flex>
           </v-card>
        </v-flex>
      </v-layout>
</div>

Затем просто установите вашу search модель в массив search: []

...