Laravel VUE JS 动态下拉菜单答案

【问题标题】：Laravel VUE JS dynamic drop down menuLaravel VUE JS 动态下拉菜单
【发布时间】：2019-03-06 17:34:44
【问题描述】：

为什么这不起作用？这是我的选择标签：

<select class="form-control" v-model="provider">
        <option value="0">Select Provider</option>
        <option v-for="provider in providers" :value="provider.provider_id">{{provider.name}}</option>
</select>

加载数据的代码：

loadProviders(){
     axios.get('api/provider').then(({data}) => (this.providers = data.data));

然后将数据存储在：

data(){
       return{
         providers : {}
      }
  }

我检查了 Chrome 的开发者网络选项卡，它确实从数据库中返回了数据。但是值（provider.name）没有显示在下拉选项菜单中。

这个问题已经解决了：Provider的模型一直出错。

【问题讨论】：

你用Vue开发者工具检查过组件的数据是你所期望的吗？
它一直是空的，可以通过检查我的提供程序模型来修复它。谢谢。

标签： laravel vue.js

【解决方案1】：

问题是，您正在解构 API 响应，但在分配给数据时没有考虑到这一点。

axios.get('api/provider').then((data) => (this.providers = data.data));

和

 axios.get('api/provider').then(({data}) => (this.providers = data));

两者都有效。

【讨论】：

【解决方案2】：

更新您的选择框

<select v-model="provider">
      <option v-for="(value,key) in provider" 
         :value="value.provider_id">
         {{value.name}}
      </option>
</select>

确保您从 API 收到正确的数据。将数据分配给provider 变量。它会出现在选择框中

【讨论】：