Question

我正在显示带有图像和输入元素的不同卡片。

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

Answer 1

所以我修复了你所遇到的v-model问题。您需要想出一种方法来存储当前ID并从搜索中获取值。

之前我曾使用过数组作为模型。它在这种情况下效果很好。

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

Answer 2

如前所述，您绑定搜索＆＃39;变量到所有卡，这是你的问题的原因。要修复它，只需将输入的 v-model 属性更改为“card.value＆＃39;”。现在每张卡的价值都是单独存储的。

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

在vuejs中显示特定卡片或元素的输入选择值？

2 个答案: