vue.js 单组件集数据

Posted 2023-02-23

【中文标题】vue.js 单组件集数据

【英文标题】：vue.js single component set data

【发布时间】：2017-05-19 04:55:46

【问题描述】：

我有一个组件，我需要通过 ajax 调用来提取一些数据。组件调用正常，ajax调用返回数据却不能赋值给模板中的数据？

<template>

    <div class="class-hero" id="dashboard-hero" :style=" 'background-image': 'url(' + last.content_image + ')' ">

        <div class="class-hero-overlay"></div>

        <div class="class-hero-container">

            <h1>  last.content_name </h1>
            <p>  last.content_description  </p>


            <div class="class-stat">
                <div id="classesCirle" class="hero-class-progress"></div>
                <p>Modules</p>
            </div>
            <div class="class-stat">
                <div id="studentsCircle" class="hero-class-progress"></div>
                <p>students</p>
            </div>
            <div class="class-stat">
                <div id="tasksCirle" class="hero-class-progress"></div>
                <p>tasks</p>
            </div>

            <a :href="'/all-classes/' + last.content_name + '/' " class="button-resume"><p>Resume</p></a>

        </div>

    </div>

</template>

<script>

    module.exports = 
        data: function() 
            return 
                last:[]
               
        ,
        mounted:  function() 

            axios.get('/custom_api/api_home_get.php?', 
                params: 
                  ID: 14
                
              )
              .then(function (response) 
                this.last = response.data.currentCourses[0];
                console.log(response.data.currentCourses[0]);
              )
              .catch(function (error) 
                console.log(error);
              );

      
    
</script>

这不可能吗？如何将数据last 设置为我在mounted 中进行的ajax 调用

【问题讨论】：

Populate table in Vue template component from rest api的可能重复

【参考方案1】：

then 函数中的 this 与组件的 this 不同，因为在 javascript 中，this 关键字绑定到其父函数。

您可以通过here 和this 示例了解更多信息。

你可以用一些方法来修复它：

1 - 使用函数原型的bind 方法。这会将您的外部this 与您本地的this 绑定。

axios.get('/custom_api/api_home_get.php?', 
   params: 
     ID: 14
   
)
.then(function (response) 
    this.last = response.data.currentCourses[0];
    console.log(response.data.currentCourses[0]);
.bind(this))
.catch(function (error) 
    console.log(error);
);

2 - 使用 ES6 箭头函数（会产生与上面相同的效果）

axios.get('/custom_api/api_home_get.php?', 
   params: 
     ID: 14
   
)
.then(response => 
    this.last = response.data.currentCourses[0];
    console.log(response.data.currentCourses[0]);
)
.catch(function (error) 
    console.log(error);
);

【参考方案2】：

.then(response) 函数中的 this 是问题所在。 this 是一个非常令人困惑的事情，即使对于有经验的开发人员来说也是如此。这是发生了什么：

您正在尝试使用this 在 vue 组件上设置数据属性的值。不幸的是，您没有引用组件数据。您实际上指的是axios.get() 函数。这是因为this 绑定到调用它的对象/范围（“调用站点”）。通过在函数内部调用this，您正在设置一个不存在的属性。

解决方案： 正如之前的评论所说：.bind(this) 链接到承诺的末尾应该修复它。

或者，您可以使用var that = this; 将其绑定到已安装的范围：

mounted: function() 
const that  = this;

axios.get('url',  
   // Code here
).then(response) 
   const reply = response.data.currentCourses[0];
   that.last = reply;
   console.log("that.last: ",that.last," | reply: ", reply);
).catch(function(error) 
   // more code
);