push value in select option in vue

Question

I m new to Vue and don't know how to solve this kind of problem I search a lot but haven't find any solution related to my problem here is my code

<tbody >
   <tr v-for="(col, index) in cols">
     <td>12345</td>
     <td><select class="form-control" v-model="col.select1" >
           <option>Select Shop</option>
           <option v-for="option1 in options1" :value="option1.name">
           {{option1.name}}</option>
        </select>
     </td>
</tbody>
<script>
 export default {

    data(){
       return{
          cols: [],
          options1:[]
           }
      },
  methods:{
     getshop(){
      var _this=this
      return this.$http.get('http://localhost:3000/api/companyproducts') .then(function (response) {  
              return  response.data;
               })
             },
       onClick(){

            this.cols.push({
            this.options1:this.getshop(), //how i can push getshop return value to select option
            qty:0 });
             },
      },    
 }
</script>

suppose if my table has 3 value then 3 row getting created along with 3 select option in ShopIdFrom column as show in image now the problem is that when i m try to push the value getting from getshop function into select option. i.e ShopIdFrom select option i does not have any option value .i.e this.cols.push not working for dynamically select option. what i m doing wrong or is there any other way to achieve this

I can't see anywhere where you add data to the options1-array. You're telling the html to render an option foreach object in the options1-array but there's no data in it. Or am i missing something? — Indyz
@Indyz getshop function returning value which I want to append in select — Rocky
I think the problem is that your this.options1 is within an object. Try moving it outside. Also log and make sure your response is working. Also, in Vue you can't set the entire array att once, it won't detect the change. You'll need to push all the objects one by one. onClick(){ this.options1.push(...this.getshop()) }, Will work if you're using ES6, otherwise just use an for-loop — Indyz

bipin bipin · Accepted Answer · 2018-03-28T07:57:44

try this hope it will help you

        onClick(){
             var t;
             var _this=this
              this.getshop().then(function(value) {
                _this.options1= value
                });
           this.cols.push({
               select1:'',
               qty:0 });

             },

push value in select option in vue

1 Answers