在 vuejs 中显示特定卡片或元素的输入选择值?
Display input selected value for particular card or element in vuejs?
我正在显示带有图像和输入元素的不同卡片。
<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 选择一个值,它会在没有选择它们的情况下向所有卡片反映相同的值。我想根据客户为该特定卡输入的输入显示输入值。
所以我解决了您遇到的 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: []
如前所述,您将 '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)">
我正在显示带有图像和输入元素的不同卡片。
<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 选择一个值,它会在没有选择它们的情况下向所有卡片反映相同的值。我想根据客户为该特定卡输入的输入显示输入值。
所以我解决了您遇到的 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: []
如前所述,您将 '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)">