Vue.js v-для каждого объекта текста с в массиве или объектах - PullRequest
Новая
       23

Vue.js v-для каждого объекта текста с в массиве или объектах

0 голосов
/ 08 мая 2019

Я хочу перечислить текст, который находится внутри массива, содержащего объекты.Кажется, я не могу понять, как решить эту проблему, я могу приблизиться ...

например 

<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", "owner": "YOU", "Удалено": false}, {"id": "w5fpn80fnnf5nxdj9f1wwwn1i", "text":android 2 "," owner ":" YOU "," удалено ": false}]
  • DATA = [{" id ":" c1ds7zqd7tcgig0b1xs1q "," text ":" Welcome new device mydoc_ios "," owner":" YOU "," удалено ": false}, {" id ":" nf5nxdj9f1dwwen1iw5fpn80fn "," text ":" More Text "," owner ":" YOU "," удалено ": false}]

но я хочу

  • Приветствуем новое устройство mydoc_android
  • Android 2
  • Добро пожаловать новое устройство mydoc_ios
  • Подробнее

Но я не могу найти лучший способ доступа к этому последнему слою.Любые указатели оценены.Это часть более крупного проекта, поэтому структура настроена для state.otherclients и довольно сложна.

1 Ответ

0 голосов
/ 08 мая 2019

Использовать вложенную петлю for с тегом template 

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