CODEWITHSUNDEEP
htmlvue.jsvuetify.jshtml-inputhtml-datalist
code.mevn
code.mevn

Reputation: 165

Display input selected value for particular card or element in vuejs?

I am displaying different cards with image and input element.

      <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>

The problem is if I choose a value for card1 it is reflecting same value to all the cards without selecting them. I want to display input values based on input entered by the customer for that particular card.

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

Upvotes: 0

Views: 1822

Answers (2)

Konrad Kalemba
Konrad Kalemba

Reputation: 1229

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)">

Upvotes: 1

Daniel
Daniel

Reputation: 533

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: []

Upvotes: 1

Related Questions