Vuejs2 在vuejs中动态添加输入和下拉列表

我正在尝试添加一个动态输入和下拉列表，我正在使用vue serach select让我显示我的代码，然后详细发布

        <template>
          <button @click="addRow1"></button>
          <table class="table table-striped">
             <thead>
               <tr style="font-size: 12px; text-align: center;">
                 <th class="span2" >Product Name</th>
                 <th class="span2" >Unit</th>
               </tr>
     </thead> 
      <tbody id="product_table_body">
         <tr v-for="(row, index) in rows">
              <td><model-list-select :list="productname"
                         option-value="product_name"
                         option-text="product_name"
                         v-model="row.selectproduct"
                         placeholder="Search Product Name"
                         @searchchange="searchprd3">
                 </model-list-select>        
              </td>
              <td>
                  <input class="form-control-sm" type="text" v-model="row.new1" disabled="disabled" style="width: 100px;">
              </td>
         </tr>
       </tbody>
     </table>

  </template>
  <script>
  export default {
    data () {
       return {     
          productname3:[],
          rows:[],  
       }
   },
  methods:{
              addRow1(){
                this.rows.push({})
              },

              searchprd3(search,index){
            },
         }
     }
  </script>

---

问题是我没有在单击“现在”时初始化下拉列表另一个问题是为什么我的下拉列表没有填充

您应该能够执行以下操作：

:list="productname+index"

---

您需要手动将

索引

与

searchtext

一起传递到回调中，以便

searchprd3

方法接收这两个值

这就是事件侦听器中的内联变量开始执行操作的地方。

$event

变量包含假定由事件传递给回调的值

因此，如果您想将事件传递的数据之外的其他数据传递到回调中，您可以手动调用回调函数，并将

$event

与您想要传递的数据一起传递，在本例中，

index

变量

您的事件侦听器应如下所示：

   @searchchange="searchprd3($event, index)"

像这样试试

 <template>
          <model-list-select :list="row.productnamex"
                  option-value="product_name"
                  option-text="product_name"
                  v-model="row.selectproduct"
                  placeholder="Search Product Name"                                                    
                   @searchchange="searchprd3($event,index,row)" >
           </model-list-select> 
 </template>
 <script>
      addRow1(){
    console.log(this.rows)
    this.rows.push({ productnamex:[],unit:'', qty:'',amt:'', cgst:'', sgst:'', igst:''})
  },
     searchprd3(searchText,index,row){
                console.log(index)
                var _this=this  
                console.log(row)       

              this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
                   console.log(response.data)
                  row.productnamex=response.data
                }).catch(function (error) {
                          console.log("error.response");  
                        });
            },
 </script>

addRow1（）{
console.log（this.rows）
this.rows.push（{productnamex:[]，单位：''，数量：''，金额：''，cgst:''，sgst:''，igst:'}）
},
searchprd3（搜索文本、索引、行）{
console.log（索引）
var_this=这个
console.log（行）
这个.http.get（'/api/companyproducts？filter[where][product_name][ilike]=%'+searchText+'%'）。然后（函数（响应）{
console.log（response.data）
row.productnamex=response.data
}).catch（函数（错误）{
console.log（“error.response”）；
});
},

---

希望这将帮助您和其他用户享受：D

问题仍然相同，它会抛出错误，如此列表映射不起作用可能尝试使用

：list=“productname3”

@IVOGELOV我尝试过，但问题是，如果我点击按钮2的时间，这意味着2输入，以及下拉现在创建后，我在下拉搜索1和搜索值存在于数据库中，我选择其中一个响应值现在的问题是，如果我在2搜索的搜索值不存在于数据库中，则下拉1显示一个SECF空如果希望有完全独立的下拉列表，那么应该为每个

行

对象添加一个专用属性/键，我们称之为

行.列表

。当您想要显示搜索结果时，您可以设置

：list=“row.list”

，然后进行AJAX调用，并将AJAX响应放入相同的

row.list

。现在，每一行都会有自己的下拉列表。谢谢你的时间，但是我如何实现你的代码实际上是很混乱的。你能发布一个更接近你现在使用的代码吗？如果我们能够理解您的代码，我将能够帮助您。@BipinShukla如果这解决了您的问题。。给他投票，选择他的答案；-）

   @searchchange="searchprd3($event, index)"

 <template>
          <model-list-select :list="row.productnamex"
                  option-value="product_name"
                  option-text="product_name"
                  v-model="row.selectproduct"
                  placeholder="Search Product Name"                                                    
                   @searchchange="searchprd3($event,index,row)" >
           </model-list-select> 
 </template>
 <script>
      addRow1(){
    console.log(this.rows)
    this.rows.push({ productnamex:[],unit:'', qty:'',amt:'', cgst:'', sgst:'', igst:''})
  },
     searchprd3(searchText,index,row){
                console.log(index)
                var _this=this  
                console.log(row)       

              this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {
                   console.log(response.data)
                  row.productnamex=response.data
                }).catch(function (error) {
                          console.log("error.response");  
                        });
            },
 </script>