Question

为什么这行不通？这是我的选择标签：

<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的模型一直存在错误。

Answer 1

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

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

和

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

都是工作。

Answer 2

更新您的选择框

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

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

Laravel VUE JS动态下拉菜单

2 个答案: