Vue.js v-用于数组或对象中的每个对象文本

Posted 2023-02-22

【中文标题】Vue.js v-用于数组或对象中的每个对象文本

【英文标题】：Vue.js v-for each object text with in an array or objects

【发布时间】：2019-09-26 03:04:32

【问题描述】：

我想列出包含对象的数组中的文本。我似乎无法弄清楚如何解决这个问题，我可以接近...

例如

<template>
  <div>
    <ul>
      <li v-for="(value, index) in otherclients" v-bind:key="index">
        DATA =  value.doc.notes 
      </li>
    </ul>
  </div>
</template>

<script>
import  mapState  from 'vuex'

export default 
  name: 'Viewer',
  computed: mapState(
    otherclients: state => state.otherclients
  )

</script>

<style lang="css" scoped></style>

会输出

DATA = [ "id": "w5fpn80fnnf5nxdj9f1n1i", "text": "欢迎新 设备 mydoc_android”、“所有者”：“你”、“已删除”：假 、“id”： “w5fpn80fnnf5nxdj9f1wwwn1i”，“文本”：“android 2”，“所有者”：“你”， “删除”：假] DATA = [ "id": "c1ds7zqd7tcgig0b1xs1q", "text": "欢迎新设备 mydoc_ios", "owner": "YOU", "deleted": false , "id": “nf5nxdj9f1dwwen1iw5fpn80fn”，“文本”：“更多文本”，“所有者”：“你”， “删除”：假]

但我想要的是

欢迎新设备 mydoc_android 机器人 2 欢迎新设备 mydoc_ios 更多文字

但我似乎无法找到进入最后一层的最佳方法。 任何指针appricaited。这是一个更大项目的一部分，因此为 state.otherclients 设置了结构并且非常复杂。

【问题讨论】：

你能做到吗？ DATA = value.doc.notes[0].text DATA = value.doc.notes[1].text

谢谢我试过这个，第一个变得未定义。下面的答案有效。

【参考方案1】：

使用带有template标签的嵌套for循环

<template>
  <div>
    <ul>
      <template v-for="(value, index) in otherclients">
         <li v-for="(note, note_index) in value.doc.notes">note.text</li>
      </template>
    </ul>
  </div>
</template>

var app = new Vue(
 el: '#app',
 data:
  name:'niklesh',
  otherclients:[
    doc:notes:[  "id": "w5fpn80fnnf5nxdj9f1n1i", "text": "Welcome new device mydoc_android", "owner": "YOU", "deleted": false ,  "id": "w5fpn80fnnf5nxdj9f1wwwn1i", "text": "android 2", "owner": "YOU", "deleted": false  ],
    doc:notes:[  "id": "c1ds7zqd7tcgig0b1xs1q", "text": "Welcome new device mydoc_ios", "owner": "YOU", "deleted": false ,  "id": "nf5nxdj9f1dwwen1iw5fpn80fn", "text": "More Text", "owner": "YOU", "deleted": false  ],
  ]
 
);

//[[text:'test11',text:'test12'],[text:'test21',text:'test22']]

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<div id="app">
      <ul>
      <template v-for="(value, index) in otherclients">
        <li v-for="(note, note_index) in value.doc.notes">note.text</li>
      </template>
      </ul>
 </div>

【讨论】：

只是快速添加？期望 v-bind:key' 指令并且不使用 note_index？

为什么还要在模板中嵌套模板？

正如我所说的，我使用了 nested ，根据我们的使用情况，可以在 template 内使用 template 。我们使用template 来处理循环/显示条件。我删除 v-bind 在模板中不受支持。甚至note_index 也没有被使用我添加来维护你的代码语法。