如何在 v-model 中附加来自 API 请求的数据

Question

我正在尝试将来自 Vue 组件内的 Axios 请求的数据附加到 v-model，但由于某种原因它不想加载...

<div class="col-lg-6">
    <div>
        <div class="form-group mb-4">
            <label for="section_english_name">Section English Name</label>
            <input v-model="form.section_name_en"  ref="section-name-english" type="text" name="title"  class="form-control" id="section_english_name" >
            <div v-if="form.errors.has('section_name_en')" v-html="form.errors.get('section_name_en')" class="text-danger"/></div>
    </div>
</div>

内部数据（）

data() {
    return {
        addonSection: {},
        addonDetails: [0],
        form: new Form({
            section_name_en: this.addonSection[0].name_en,
            section_name_ar: '',
            quantity: 0,
            addon_select_type: 1,
            hide_addon_item: 1,
            addon_name_en: [],
            addon_name_ar: [],
            price: [],
        })
    }
},

方法：

loadAddonSection () {
    axios.get('/vendor/addons/' + this.addonid + '/edit').then((data) => {
        this.addonSection = data.data;
    })
},

Vue data() 甚至没有加载到 Vue 工具栏中我不知道为什么！！

当我评论“this.addonSection[0].name_en”时，它会完美加载数据 changed it to string or when i remove it

Answer 1

阅读您的错误。

        addonSection: {},  
addonDetails: [0],
  form: new Form({
     section_name_en: this.addonSection[0].name_en,

你说 section_name_en 是 this.addonSection[0].name_en ，你上面的 2 行初始化为空对象，这有意义吗？

将您的 section_name_en 初始化为空的，然后在 Axios 成功调用中更新您喜欢的内容！

在进入axios函数之前set var self = this所以因为axios函数里面this指的是axios，所以如果要修改一个vue变量现在可以使用self.addonDetails.section_name_en = AxiosResult

希望对你有帮助，好看的哥们。