从循环Vue.js中的每个选择中获取数据

Posted 2023-02-22

【中文标题】从循环Vue.js中的每个选择中获取数据

【英文标题】：Get data from each select in the loop Vue.js

【发布时间】：2021-03-28 21:58:01

【问题描述】：

我有一系列产品要填写（产品字段：type:"",name:""）。 有一个变量可以输入要输入的产品数量。然后，对于每个产品，使用一个选择和一个输入文本呈现一个单独的 div。 我需要从每个这样的块中获取数据并将它们放入一个数组中。

      <div v-for="n in parseInt(countProd)" :key="n">
        <div>
          <select>
            <option>option1</option>
            <option>option2</option>
            <option>option3</option>
          </select>
          <input placeholder="Product name">
        </div>
    </div>

【参考方案1】：

让我知道这是否有意义。

new Vue(
      el: '#app',
      data() 
        return 
          title: "Vue 2 app",
          countProd:0,
          products:[]
        ;
      ,
      watch:
        countProd(newVal,old)
          console.log(old,newVal)
          this.products=Array.from(length:newVal,(v,i)=>
            return  type:'1', name:''
          )
        
      
    )

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
No. of Products:
<input v-model="countProd" />
<div v-for="(p,n) in products" :key="n">
        <div>
          <select v-model="products[n].type">
            <option value="1">option1</option>
            <option value="2">option2</option>
            <option value="3">option3</option>
          </select>
          <input placeholder="Product name" v-model="products[n].name">
        </div>
    </div>
    <p v-if="products.length>0">products</p>
</div>

【讨论】：

谢谢，但是如何选择 2 的 concat 值，例如：option1 option2 option3option4 option5 option6 和最终类型如：“option1”+“option4”跨度>

目前最终的形状是[type:'1',name:'one',...,...]你想要的形状如何？

最终的形式是相同的[type:'1',name:'one',...,...]，但是类型是由两个选择组合而成的

可能有 n 个没有。的项目。您要如何以及要连接哪 2 个选择？

连接，我的意思是结合第一个和第二个select的值。例如，第一次选择时，我选择了 option1，从第二次选择中，我选择了 option4。然后键入 =“option1”+“option4”。结果，您应该得到： [type: 'option1 + option4', name: 'name', ..., ...]