在vue中选择选项中的值

时间:2018-03-28 06:45:11

标签: laravel-5 vue.js vuejs2

我是Vue的新手并且不知道如何解决我经常搜索的这类问题,但是找不到任何与我的问题相关的解决方案 这是我的代码

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

假设我的表有3个值,那么在ShopIdFrom列中创建了3行以及3个选择选项,如图所示现在问题是当我尝试将值从getshop函数推送到select选项时。即ShopIdFrom选择选项我没有任何选项值enter image description here .i.e this.cols.push不适用于动态选择选项。我做错了什么或有没有其他方法来实现这个

1 个答案:

答案 0 :(得分:2)

试试希望它能帮到你

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

             },