Vue.js 用于从http向vue组件获取结果的动态v-R渲染

我正试图从目标API端点的返回项数组中实现元素库的动态呈现。下面是我试过的

<template id="list-comp-tpl">
    <button @click="searchNow">Search Now</button>
    <ul v-for="item in searchResults">
        <li>{{ item.name }}</li>
    </ul>
</template>

<div id="app">
    <list-comp></list-comp>
</div>

Vue.components('list-comp',{
    template : '#list-comp-tpl',
    data() {
        return {
            searchResults : [];
        }
    },
    method : {
        searchNow(){
          // perform api query
          axios.get('http://apiwebsite.com/search')
          .then(function (response) {
            // handle success
            this.searchResults = response.data.msg;
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
          .then(function () {
            // always executed
          });
        }
    }
});

new Vue({
    el '#app'
});

现在搜索

{{item.name}

Vue.组件（“列表组件”{
模板：“#列出公司tpl”，
数据（）{
返回{
搜索结果：[]；
}
},
方法：{
searchNow（）{
//执行api查询
axios.get（）http://apiwebsite.com/search')
.然后（功能（响应）{
//成功
this.searchResults=response.data.msg；
})
.catch（函数（错误）{
//处理错误
console.log（错误）；
})
.然后（函数（）{
//总是执行
});
}
}
});
新Vue({
el'#应用程序'
});

---

但是组件

列表comp

根本没有更新，就像api返回数据时一样，它不会像我期望的那样显示。是否有任何帮助，请提供想法？

请尝试按图所示分配值

this.searchResults = Object.assign({}, response.data.msg);

您在数组中设置值的方式不会将它们设置为DOM上的被动属性。因此，不会使用新数据更新组件

还可以使用Vue.set更新数组值

请参阅下面的链接。

---

尝试分配如图所示的值

this.searchResults = Object.assign({}, response.data.msg);

您在数组中设置值的方式不会将它们设置为DOM上的被动属性。因此，不会使用新数据更新组件

还可以使用Vue.set更新数组值

请参阅下面的链接。

对于我来说，“此”在函数（响应）中不可见

适合我的解决方案

 .then(response => this.searchResults = response.data.msg)

或者，如果您喜欢功能（响应），请尝试以下方法：

searchNow(){
      _self = this;
      // perform api query
      axios.get('http://apiwebsite.com/search')
      .then(function (response) {
        // handle success
        _self.searchResults = response.data.msg;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });
    }

对我来说，“这”在函数（响应）中不可见

适合我的解决方案

 .then(response => this.searchResults = response.data.msg)

或者，如果您喜欢功能（响应），请尝试以下方法：

searchNow(){
      _self = this;
      // perform api query
      axios.get('http://apiwebsite.com/search')
      .then(function (response) {
        // handle success
        _self.searchResults = response.data.msg;
      })
      .catch(function (error) {
        // handle error
        console.log(error);
      })
      .then(function () {
        // always executed
      });
    }

---

尝试分配如下所示的值。searchResults=Object.assign（{}，response.data.msg）；您在数组中设置值的方式不会将它们设置为DOM上的被动属性。因此，您的组件没有用新数据更新。您的代码中有几个输入错误：它是带有s的

方法，您缺少
：
在
el#app
之间，应该是
el:'#app'
尝试分配值，如下所示。searchResults=Object.assign（{}，response.data.msg）；您在数组中设置值的方式不会将它们设置为DOM上的被动属性。因此，您的组件没有用新数据更新。您的代码中有几处输入错误：它是带有s的
方法，您错过了
：
在
el#app
之间，应该是
el:“#app”
，或者在ES6上使用箭头函数是的，显然，我在想什么，谢谢你指出。或者如果在ES6上使用箭头函数是的，很明显，我在想什么，谢谢你指出。数组可以重新分配。问题是
此
数组可以重新分配。问题是
这个