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

Posted 2023-02-16

【中文标题】如何在 v-model 中附加来自 API 请求的数据

【英文标题】：How to attach data from API request inside v-model

【发布时间】：2021-10-02 18:37:09

【问题描述】：

我正在尝试将来自 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

【问题讨论】：

在this.addonSection没有数据的情况下创建组件时如何读取this.addonSection[0].name_en????

当我添加这一行“this.addonSection[0].name_en”时，它给了我错误，但没有它可以完美加载数据，没有任何问题

是的，因为这就是问题所在...再次阅读我的评论...

那么我应该如何在我的 v-model 中加载数据......我想将我的 API 请求中的数据附加到我的表单......请再次检查我的帖子

您必须再次阅读文档...参见Vue Lifecycle...This 是最重要的...当created 生命周期运行时，data 可用。 ..所以当this.addonSection 为空时，您尝试运行this.addonSection[0].name_en...所以它永远不会读取API...section_name_en 应该是section_name_en: '' 并且当created 钩子开始时，您应该在那里读取 API 并存储您想要的数据...

【参考方案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

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

【讨论】：

这是不正确的，因为箭头函数内的this 是一般范围而不是函数本身，所以在这种情况下使用this.addonSection = data.data; 是正确的。

你说得对，说实话我没看过他的axios函数/