Vue.js - 在方法（单击）中创建的值未显示在 v-for 循环中

Question

I want the program to fetch some data @click and then display it in the v-for loop.

After I click the button, data shows up in the console, but I don't see anything being displayed on the page.

Is it because data is being created after the element has been rendered? How do I make Vue to re-render the loop to show the fetched data?

Codepen: https://codepen.io/x84733/pen/jKxQKo?editors=1010

<v-btn @click="fetchData">
  fetch propeties 
</v-btn>

<h2>Properties:</h2>
<div v-for="item in properties">
  <div>{{item.title}}: {{item.value}}</div>
</div>

...  

data () {
  return {
    properties: {}
  }
},
methods: {
  fetchData () {
    var nameObj = {'title': 'name'}
    var sizeObj = {'title': 'size'}

    nameObj['value'] = 'file.txt'
    sizeObj['value'] = 12

    this.properties['name'] = nameObj
    this.properties['size'] = sizeObj

    console.log(this.properties)
  }
}

Answer 1

In documentation of vuejs it is clearly mentioned that v-for is for arrays and not objects.

https://v2.vuejs.org/v2/guide/list.html

Your properties is an object which has name as size.

Make this change

 new Vue({ el: '#app', data () { return { properties: [] } }, methods: { fetchData () { var nameObj = {'title': 'name'} var sizeObj = {'title': 'size'} nameObj['value'] = 'file.txt' sizeObj['value'] = 12 this.properties.push(nameObj) this.properties.push(sizeObj) console.log(this.properties) } } })

After this change your code will work fine