Question

我有一个组件，我需要通过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调用

Answer 1

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

您可以详细了解here和this示例。

您可以通过某些方式修复它：

1 - 使用Function原型的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);
});

Answer 2

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

您正尝试使用this在vue组件上设置数据属性的值。不幸的是，您没有引用组件数据。您实际上是指axios.get()函数。这是因为this绑定到调用它的对象/范围（＆＃39; call-site＆＃39;）。通过调用函数内的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
});

vue.js单个组件集数据

2 个答案: