时间戳

首页 > 解决方案 > 值没有进入vue js的下拉框中

php - 值没有进入vue js的下拉框中

问题描述

我从数据库获取值到下拉框所在的页面，但下拉框没有返回值。代码如下图，

脚本

methods: {
        editState(id){
            axios.defaults.headers.common['Authorization'] = "Bearer "+localStorage.getItem('token'); 
              axios.get(baseUrl+'/state/edit/'+id)
              .then((response) => {

                    alert(response.data[0].form.country_name);

                    this.form = response.data[0].form;

                     setTimeout(() => {
                         this.subComponentLoading = true;
                    }, 500);
                })
                .catch(function (error) {
                console.log(error);
            });
        }
       }

Vue

<d-field-group class="field-group field-row" label-for = "country_name" label="Country Name" label-class="col-4">
    <d-select :options="Countries" v-model="form.country_id" id="country_id" name = "country_name"  wrapper-class="col-7">

    </d-select>
</d-field-group>

在此处输入图像描述 在此处输入图像描述

标签： phplaravelvue.js

解决方案

我看到的两件事是错误的......

  1. Countries位于form对象内部，但您没有从那里分配或读取它。将其移至顶层

  2. 您正在绑定 a v-model，form.country_id但这最初并不存在。将其添加到form对象。

总结...

data () {
  return {
    isStateEditVisible: false, 
    form: {
      state_name: '', 
      isStateEnabled: true, 
      ISO_Code: '', 
      country_id: '', //  added this
      country_name: '', 
      zone_name: ''
    },
    Countries: [],    //  moved this
    Zones: []         //  and this
  }
}

为了对数据变化做出反应，Vue 需要预先了解它们。见https://vuejs.org/v2/guide/reactivity.html

推荐阅读