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

Posted 2023-03-05

【中文标题】在vuejs中显示特定卡或元素的输入选择值？

【英文标题】：Display input selected value for particular card or element in vuejs?

【发布时间】：2018-11-14 15:43:44

【问题描述】：

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

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

【问题讨论】：

你能提供一个 CodePen 来重现你的问题吗？

你不会把 v-for="card in cards" 放在 v-card 元素上吗？我们肯定需要查看 sn-p/codepen 以了解您要执行的操作。

jsfiddle.net/eywraw8t/62401 这是链接

您在所有输入上都有v-model="search"，因此所有输入都反映了相同的值。因此，您可能希望将search 转换为字符串数组，然后将每个输入绑定到它自己的 v-model。

【参考方案1】：

如前所述，您将“搜索”变量绑定到所有卡片，这就是问题的原因。要修复它，只需将输入的 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)">

【讨论】：

谢谢@konrad kalemba。再次从 datalist 中选择一个值后，我们需要再次选择它意味着选择值 2 次。有没有办法摆脱它？

@code.mevn jsfiddle.net/bhr0d69q/24 看看。我为数据列表提供了唯一的 ID，因为它们都具有相同的 ID，这导致了问题。

filteredInput 必须在用户开始输入后返回，并且它必须返回与输入的输入完全一致的值。

jsfiddle.net/bhr0d69q/30 这是我需要的。谢谢@Konrad Kalemba

【参考方案2】：

所以我修复了您遇到的 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"  >
              <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: []

【讨论】：

谢谢@Daniel。再次从 datalist 中选择一个值后，我们需要选择它意味着选择值 2 次。有没有办法摆脱它？

@code.mevn，我知道。您的问题是关于 v-model。