Javascript 通过AJAX请求获取对象后，如何在Vue.js中呈现该对象？

假设我有这个html：

产品清单
名称
价格
类别
${product.name}$
${product.price}$
${product.category}$

还有这样一个Vue脚本：

methods: {
    getHello() {
        ...
    }
},

var-app=新的Vue({
分隔符：['${'，'}$']，
el:“#应用程序”，
数据：{
//我希望在发送请求后得到这个数组，而不是这个硬编码的结果
产品：[
{名称：“键盘”，价格：44，类别：'附件'}，
{名称：“鼠标”，价格：20，类别：'附件'}，
{名称：“显示器”，价格：399，类别：'附件'}，
{名称：“戴尔XPS”，价格：599，类别：'笔记本电脑'}，
{名称：“MacBook Pro”，价格：899，类别：“笔记本电脑”}，
{名称：“铅笔盒”，价格：6，类别：'文具'}，
{名称：“笔”，价格：2，类别：'固定'}，
{名称：“USB电缆”，价格：7，类别：'附件'}，
{名称：“橡皮擦”，价格：2，类别：'固定'}，
{名称：“荧光灯”，价格：5，类别：'固定'}
]
},
});

如何使用AJAX发送请求以获取产品对象列表，并在请求返回结果后将其传递给Vue进行渲染

我会想象这样的事情，但这不起作用：

let产品；
函数getHello（）{
var ajaxSendRequest=$.ajax({
url:“{path（'get_products'）}}”，
键入：“GET”，
数据类型：“json”
});
ajaxSendRequest.done（函数（数据）{
//将products变量设置为来自响应的数据
产品=数据；
}).fail（函数（textStatus，errorshown）{
});
}
//在此之后，请在vue中使用它

---

我对这类事情没有太多的经验，所以如果不能做到这一点，那么完成同样事情的正确方法是什么？（从api获取数据，然后进行渲染）

您应该首先为ajax代码创建一个Vue方法

方法在应用程序中定义如下：

methods: {
    getHello() {
        ...
    }
},

methods属性位于Vue实例内部，与

数据

等相同

一旦它出现，您就可以通过访问

this来设置产品。products

其中

this

引用该组件的Vue实例

比如说

methods: {
    getHello() {
        ...
        this.products = ajaxResponse;
    }
},

然后，您只需在Vue组件中使用

products

数据变量，它是“反应式”的，这意味着Vue会在更改时自动跟踪和更新

然而，有一个问题。您的方法使用回调。在回调中，

此

不会引用Vue实例，因此您需要执行以下操作

methods: {
    getHello() {
        const $vm = this;
        ...
            // Inside your callback
            $vm.products = ajaxResponse;
    }
},

这允许我们设置一个本地作用域版本的

This

，该版本引用回Vue实例，并在回调中访问它，在回调中Vue

This

将被覆盖

然后在

mounted（）

lifecycle钩子中调用此方法：

mounted() {
    this.getHello();
}

---

只需检索数据并显示列表即可。当项目准备就绪时，Vue将渲染这些项目。本例的示例如下：

产品清单
名称
价格
类别
{{product.name}
{{product.price}}
{{product.category}
从“vue”导入{defineComponent}；
导出默认定义组件({
安装的（）{
设置超时（（）=>{
this.localProducts=this.serverProducts
}, 3000)
},
数据（）{
返回{
localProducts：未定义，
服务器产品：[
{名称：“键盘”，价格：44，类别：'附件'}，
{名称：“鼠标”，价格：20，类别：'附件'}，
{名称：“显示器”，价格：399，类别：'附件'}，
{名称：“戴尔XPS”，价格：599，类别：'笔记本电脑'}，
{名称：“MacBook Pro”，价格：899，类别：“笔记本电脑”}，
{名称：“铅笔盒”，价格：6，类别：'文具'}，
{名称：“笔”，价格：2，类别：'固定'}，
{名称：“USB电缆”，价格：7，类别：'附件'}，
{名称：“橡皮擦”，价格：2，类别：'固定'}，
{名称：“荧光灯”，价格：5，类别：'固定'}
]
}
}
});