Hello, there is an array:

array

Code:

var content = new Vue({ el: '#content', data: { data: data } });

All values ​​from the array are output, but how do you output values ​​from the items array which is inside data? The composition of items does not depend on me, the lines are constantly removed and added.

    2 answers 2

    Hello.

    You can output values ​​from the items array like this:

      var appVue = new Vue({ el: '#app', data: { data: [{ items: ['item 1 1', 'item 1 2', 'item 1 3', ] }, { items: ['item 2 1', 'item 2 2', 'item 2 3', ] }, { items: ['item 3 1', 'item 3 2', 'item 3 3', ] } ] }, methods: { add() { this.data[0].items.push('new item') }, remove() { this.data[0].items.pop() }, set() { this.data[0].items = ['item 1', 'item 2', 'item 3'] } } }) 
     <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> <div id="app"> <button @click=add>Добавить элемент</button> <button @click=remove>Удалить элемент</button> <button @click=set>Задать сразу массивом</button> <ul v-for="(Record, index) in data" :key="`Record-${index}`"> <li><b>Record #{{index+1}}</b></li> <li v-for="(item, indexItem) in Record.items" :key="`item-${index}-${indexItem}`" v-text="item" /> </ul> </div>

    • The composition of items does not depend on me, the lines are constantly removed and added. - Pavel
    • Wonderful. The code does not change from this. Added buttons that change the array. The most extreme case is the Vue.set method (also known as this. $ Set) Documentation: ru.vuejs.org/v2/api/#Vue-set - Idushii
    • I mean, the information in items is parsed with api and is constantly changing, it just needs to be displayed. The date array is received, I’m from there the user’s nickname is taken in this way: "{{data.userName}}" and it’s necessary that the information was also taken from items which is different for each user. - Pavel

    Solved problems

     v-for="i in item.items"