Question

我正在尝试使用Vue并遇到问题。

使用v-for不会更新包含内容的div。

我现在正在使用Vue CDN并在单个JS文件中添加vue组件

JS：

  Vue.component('vue-content', {
   data: function() {
    return {
        data: []
    }
},
template: `
    <div id='content'>
        <p> This is the content section </p>
        <div v-for="info in data">
            <p> {{ info.title }} </p>
        </div>
    </div>
`,
created: function() {
    this.test();
},
methods: {
    test: function() {
        var url = 'https://jsonplaceholder.typicode.com/posts';
        var apiCall = new XMLHttpRequest();
        apiCall.onload = function() {
            if(this.status == 200) {
                var data = JSON.parse(apiCall.responseText);
                console.log(data);      
            }
            else {
                console.log("Unable to load data, Please try later!!!!");
            }
        }

        apiCall.open("GET", url, true);
        apiCall.send();
    }
}

})

new Vue({
el: "#app"
})

HTML：

   <div id="app">
    <vue-navbar></vue-navbar>
    <vue-content></vue-content>
    <vue-footer></vue-footer>
   </div>
  <script src="main.js"></script>

以这种方式显示内容是不可能的？或者我应该使用cli方式还是这样做？

Answer 1

问题是您没有更新为Vue.js指定的data数组。相反，您只需创建一个具有相同名称的新变量。这不是它的工作原理。

通常，您必须引用this.data。但是，由于API回调中的范围（以及this）不同，您必须引用正确的this。例如。使用var vueThis = this;。

methods: {
    test: function() {
        var url = 'https://jsonplaceholder.typicode.com/posts';
        var apiCall = new XMLHttpRequest();
        var vueThis = this;
        apiCall.onload = function() {
            if(this.status == 200) {
                vueThis.data = JSON.parse(apiCall.responseText);
                console.log(vueThis.data);      
            }
            else {
                console.log("Unable to load data, Please try later!!!!");
            }
        }

        apiCall.open("GET", url, true);
        apiCall.send();
    }
}

无法在vue js中运行循环

1 个答案: