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

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

如前所述，您将 'search' 变量绑定到所有卡片，这就是您出现问题的原因。要修复它，只需将输入的 v-model 属性更改为 '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)">

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

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

html

vue.js

vuetify.js

html-input

html-datalist