如何在Vue.js中使用v-for循环遍历对象数组?

时间:2017-11-03 23:30:23

标签: javascript arrays json vue.js

我正在努力迭代这个对象数组。我没有看到任何控制台错误,也不确定为什么数据没有显示。

{
 "messages":[
  {
    "id":1,
    "sender":"frank",
    "message":"Lorem ipsum...",
    "time":1398894261,
    "status":"read"
  },
  {
    "id":2,
    "sender":"mary",
    "message":"Lorem ipsum...",
    "time":1390824261,
    "status":"read"
  },
  {
    "id":3,
    "sender":"john",
    "message":"Lorem ipsum...",
    "time":1308744200,
    "status":"unread"
  }
 ]
}

我正在使用http get请求并且数据正在进入,但我无法迭代它。这是我的js:

new Vue({
    el: '#app',
    data: '',
    ready: function() {
      // GET request
      this.$http.get('https://www.example.com/file.json', function (data) {
        // set data on vm
        this.$set('data', data.messages);
        }).error(function (data, status, request) {
            console.log('http request error')
        })
    }
  })

这是我的HTML:

<div v-if="data">
  <li v-for="d in data">{{ d.sender }}</li>
</div>
<p>{{data[0].sender}}</p> <!-- this part works -->

2 个答案:

答案 0 :(得分:1)

在AJAX请求的回调中,this不是vm,你可以通过

来解决这个问题。
  1. 使用箭头功能
  2. 使用var vm = this
  3. 使用.bind(this)
  4. 此笔使用箭头功能:https://codepen.io/iampaul83/pen/bYpqgm

    arrow function

    new Vue({
        el: '#app',
        data: '',
        ready: function () {
            // GET request
            this.$http.get('https://www.example.com/file.json', (data) => {
                // set data on vm
                this.$set('data', data.messages);
            }).error(function (data, status, request) {
                console.log('http request error')
            })
        }
    })
    

    var vm = this

    new Vue({
        el: '#app',
        data: '',
        ready: function () {
            // GET request
            var vm = this
            this.$http.get('https://www.example.com/file.json', function (data) {
                // set data on vm
                vm.$set('data', data.messages);
            }).error(function (data, status, request) {
                console.log('http request error')
            })
        }
    })
    

    .bind(this)

    new Vue({
        el: '#app',
        data: '',
        ready: function () {
            // GET request
            this.$http.get('https://www.example.com/file.json', function (data) {
                // set data on vm
                this.$set('data', data.messages);
            }.bind(this)).error(function (data, status, request) {
                console.log('http request error')
            })
        }
    })
    

答案 1 :(得分:0)

您的问题可能是由于vue.js深度反应性限制造成的。(查看vue&#39; s documentation) 我的建议是使用push而不是使用 this.$set遍历您的响应,并在您将在数据对象中声明的消息变量中逐个推送结果。

data.messages.forEach( (msg ) => { this.messages.push( msg ); }

在模板中循环显示消息变量。