Vue 3 组件 - 试图调用 AJAX答案

【问题标题】：Vue 3 component - trying to call AJAXVue 3 组件 - 试图调用 AJAX
【发布时间】：2021-02-28 00:54:54
【问题描述】：

我正在尝试使用 Vue 使引导模式动态化...

组件 HTML：

 <div id="commentList">
     <comment-list
         v-for="comment in comments"
         :key="comment.id"
         :content="comment.content"
     ></comment-list>
 </div>

<script>
 const app = Vue.createApp({
        data() {
            return {
                comments: []
            };
        },
        created () {
            this.fetchComments();
        },
        methods: {
            fetchComments: function () {
                $.ajax({
                    url: '/activity/head/52',
                    method: 'GET',
                    success: function (data) {
                        this.comments = data;
                    }
                });
            }
        }
    });

    app.component('comment-list', {
        props: ['content'],
        delimiters: ['{:', ':}'],
        template:
            `
                <div class="row my-4">
                    <div class="col-1"><img src="/photo-alex.jpg" class="rounded-circle" style="width:38px; height: 38px"></div>
                    <div class="col-11 p-3 text-muted rounded bg-white border">
                        {:content:}
                    </div>
                </div>
            `
    });

    app.mount('#commentList');
</script>

AJAX 请求没有被执行，所以这是我遇到的第一个问题，想法？

AJAX 响应：

[
  {
    id: 76,
    ago: "in 4 hours",
    user: "Alex",
    content: "THIS IS A COMMENT"
  }
]

【问题讨论】：

我已经更改了一些代码并修复了一些在 console.log() 中显示的问题，现在正在调用 AJAX，但在 console.log 中没有错误，也没有显示结果？？ ?想法？
您能否创建一个minimal reproducible example 来重现该问题。我建议使用codesanbox.io 或类似的。你所拥有的应该可以工作。尽管这可能与在 Vue 3 中使用 Vue 2 语法有关。尚未精通 3。只是为了确保，请尝试使用最新的 vue 2 而不是您正在使用的任何版本。
对不起，我最初从错误的窗口粘贴...我有一些简单的错误是由于从另一个窗口复制粘贴引起的，我也在本地运行并且没有注意到。以上没有错误，但也不起作用。
没关系，我发现了这个问题。 fetchData 中的 this 不是 Vue 实例。我会发布一个答案。

标签： vue.js vue-component vuejs3

【解决方案1】：

您正在为$ajax.success 使用普通函数。在其中，this 是该函数的上下文，而不是 Vue 实例。将其更改为箭头函数，以便它可以访问外部范围，这将允许它将响应分配给 Vue 实例的comments。基本上：

fetchComments: function() {
  $.ajax({
    url: '/activity/head/52',
    method: 'GET',
    success: function(data) {
      this.comments = data;
    }
  });
}

应该变成：

fetchComments() {
  $.ajax({
    url: '/activity/head/52',
    method: 'GET',
    success: data => {
      this.comments = data;
    }
  });
}

注意：从fetchComments: function(){ ... } 更改为fetchComments() { ... } 无关紧要。它们是一样的，只是我更喜欢更短的语法。

重要的是将success 从function(data) { ... } 更改为data => { ... }。

【讨论】：

仍然没有渲染列表...我觉得 data() 现在必须成为一个函数是 Vue3 的要求？？？
是的，我犯了一个错误。刚刚改正了。该方法应该是function()。只有ajax调用应该是一个箭头函数。我还将重新制定准确和具体的形式，所以这很有帮助:)
那也没有...我将如何访问属性“cmets”并将其包装在一个函数中？
好的抱歉 - 我错过了 fetchComments()
没关系。您可以将其写为methods: { fetchComments() { ... }} 或methods: { fetchComments: function() { ... }}。这完全一样。我个人更喜欢第一种语法。对我来说，它更具可读性，但我知道这是个人选择。