[Vuejs]-Display input selected value for particular card or element in vuejs?

by

1👍

✅

As stated before, you bind ‘search’ variable to all cards, which is the reason of your problem. To fix it simply change input’s v-model property to i.e. ‘card.value’. Now each card’s value is stored seperately.

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)">
👤Konrad Kalemba

1👍

So I fixed your v-model issue that you were having. You’ll need to come up with a way to store the current id and get the value from search.

I’ve used an array as the model before. It works pretty well in situations like this.

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>

Then just set your search model to an array search: []

👤Daniel

Leave a comment