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

Question

我希望程序获取一些数据@click，然后将其显示在v-for 循环中。

单击按钮后，数据会显示在控制台中，但我没有看到页面上显示任何内容。

是不是因为在元素渲染之后创建了数据？ 如何让 Vue 重新渲染循环以显示获取的数据？

代码笔：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

在 vuejs 的文档中明确提到 v-for 用于数组而不是对象。

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

您的属性是一个名称为大小的对象。

进行此更改

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)
    }
  }
})

在此更改后，您的代码将正常工作