Question

我正在尝试从目标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'
});

但是组件list-comp根本没有更新，就像从api返回数据一样，它没有按我期望的那样显示。有什么帮助吗，想法吗？

Answer 1

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

对我有用的解决方案

 .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
      });
    }

Answer 2

尝试如图所示分配值。

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

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

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

请参阅下面的链接。 https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats

从http获得的动态v-for获取结果到vue组件

2 个答案: