2

I m trying to add a dynamical input along with dropdown for that i m using vue-serach-select let me show my code then issue in detail

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

now if i click on button one more row is added with dropdown now my problem is that how i can differentiate productname according to dynamic create row i had tried like :list="productname{index},:list="productname.index but none of them worked and last thing i want to pass index parameter in searchprd3 function so i tried like this searchprd3(search,index) in function I m getting index but it throw error for search and if only pass index then also throw error however it work none of parameter is passed from select like this @searchchange="searchprd3" but in function i m not getting index value or is there anyother way to achieve this thing

updated

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

i want select option list seprate for every row but my code throw error like "Cannot read property 'map' of undefined" that is why row push not working for dynamic row is I m missing Something

update2

found my mistake 

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

problem is that i haven't initialize my dropdown at rows click now another problem is that why my drop not get populated

Improve this question

3 Answers 3

Reset to default
1

try like this 

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

hope this will help you as well as other enjoy :D

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

@BipinShukla if this solved your question.. give the guy a vote and choose his answer ;-)
0

you should be able to do:

:list="productname+index"
Improve this answer

4 Comments

issue still same it throw error like this list map is not function
Perhaps try with :list="productname3"
@IVOGELOV i tried but problem is that, consider if i clicked on button 2 time that means 2 input as well as drop down is created now after that i does search in dropdown 1 & search value exist in database and i selected one of them response value now issue is that if i does search on 2 input whose search value does not exist in data base then dropdown 1 show null for a sec
If you want to have completely separate drop-down lists then you should add a dedicated property/key to each row object, let's call it row.list. When you want to show the results of the searching you set :list="row.list" and then make your AJAX call and put the AJAX response into the same row.list. Now every row will have its own drop-down list of items.
0

You need to manually pass the index into the callback together with the searchtext in order for your searchprd3 method to receive both values.

This is where the inline $event variable in your event listener comes into the action. The $event variable contains the value that is supposedly passed to your callback by the event.

So if you want to pass additional data into the callback aside from the data that is passed by the event, you can manually call the callback function and pass the $event together with the data that you want to pass which in this case, the index variable.

Your event listener should look like this:

   @searchchange="searchprd3($event, index)"
Improve this answer

2 Comments

thanks for you time but how i can achieve 1st condition
your code is actually really confusing. can you post a code that is closer to what you are using right now? I would be able to help you if we can understand your code.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.