Question

我正在尝试使用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} ,: list =” productname）来区分产品名。索引，但它们都不起作用，最后我想在searchprd3函数中传递索引参数，因此我尝试在函数中使用此searchprd3（search，index）来获取索引，但是它会为搜索抛出错误，如果仅传递索引也会抛出错误但是它的工作原理是，没有参数像这样通过@ searchchange =“ searchprd3”从select传递，但是在函数中我没有获取索引值，或者有其他方法可以实现此目的

已更新

     <tr v-for="(row, index) in rows">
              <td><model-list-select :list="row.productname"
                         option-value="product_name"
                         option-text="product_name"
                         v-model="row.selectproduct"
                         placeholder="Search Product Name"
                         @searchchange="searchprd3">
                 </model-list-select>        
              </td>
           </tr>
      <script>
                     searchprd3(searchText,index){
              var _this=this         
              this.$http.get('/api/companyproducts?filter[where][product_name][ilike]=%'+searchText+'%').then(function (response) {

                  _this.rows.push({productname:response.data})

                }).catch(function (error) {
                          console.log("error.response");  
                        });
            },
      </script>

我希望每一行的选择选项列表都分开，但是我的代码抛出错误，例如“无法读取未定义的属性'map'” 这就是为什么行推送不适用于动态行的原因是我缺少了什么

更新2

发现我的错误

        addRow1(){
    this.rows.push({
                      productnamex:[],
                      unit:'',
                      qty:'',
                      amt:'',
                      cgst:'',
                      sgst:'',
                      igst:''})
  },

问题是我还没有在行中初始化我的下拉菜单，现在另一个问题是为什么我的下拉列表没有填充

Answer 1

尝试这样

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

希望这将帮助您以及其他享受：D

Answer 2

您应该可以：

:list="productname+index"

Answer 3

您需要将index与searchtext一起手动传递到回调中，以便您的searchprd3方法同时接收这两个值。

这是事件侦听器中的内联$event变量进入操作的位置。 $event变量包含该事件传递给您的回调的值。

因此，如果除了事件传递的数据之外，还希望将其他数据传递给回调，则可以手动调用回调函数，并将$event与要传递的数据一起传递给回调函数。在这种情况下，index变量。

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

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

在vue.js中动态添加输入和下拉菜单

3 个答案: