37 掌握v-for遍历数组和对象

Posted 2023-04-26

参考技术A https://www.bilibili.com/video/BV15741177Eh?p=37
当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成。
v-for的语法类似于javascript中的for循环。
格式如下：item in items的形式。

我们来看一个简单的案例：
如果在遍历的过程中不需要使用索引值
v-for="movie in movies"
依次从movies中取出movie，并且在元素的内容中，我们可以使用Mustache语法，来使用movie
如果在遍历的过程中，我们需要拿到元素在数组中的索引值呢？
语法格式：v-for=(item, index) in items
其中的index就代表了取出的item在原数组的索引值。

v-for可以用户遍历对象：
比如某个对象中存储着你的个人信息，我们希望以列表的形式显示出来。

注意是v-for="(value,key,index) in info"

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

【中文标题】如何在 Vue.js 中使用 v-for 遍历对象数组？

【英文标题】：How do I loop through an array of objects using v-for in Vue.js?

【发布时间】：2018-04-16 18:36:24

【问题描述】：

我正在努力迭代这个对象数组。我没有看到任何控制台错误，也不确定数据未显示的原因。

 "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 -->

【问题讨论】：

首先，在创建消息时，将消息重新定义为数据对象中的空数组。而不是 $set，只需将 data.messages 分配给 this.messages，并使用计算属性从数据中提取消息并在模板​​中迭代它。

【参考方案1】：

在AJAX请求的回调中，this不是vm，可以这样解决

使用箭头功能 使用var vm = this 使用.bind(this)

这支笔使用箭头功能：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')
        )
    
)

【参考方案2】：

您的问题可能是由于 vue.js 深度反应限制。（查看 vue 的文档） 我的建议是使用 push 而不是使用 this.$set 循环遍历您的响应并将结果一个元素地推送到您将在您的数据对象中声明的消息变量中。

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

在您的模板循环中通过消息变量。