Vue.js 不更新 HTML答案

【问题标题】：Vue.js does not update HTMLVue.js 不更新 HTML
【发布时间】：2019-12-10 17:55:11
【问题描述】：

我的本地 Vue.js 项目中有以下 .html 文件（它是简化版）：

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8">
        <title>Vue.js</title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>

    <body>
        <main>
            <div id="myElement">
                <div v-for="(properties, name) in list" v-bind:key="name">{{ name }}</div>
            </div>
        </main>

        <script type="module">
            import SomeClass from "./SomeClass.js";

            const myClass = new SomeClass();

            let app = new Vue({
                el: "#myElement",
                data: {
                    list: myClass.object
                },
            });
        </script>
    </body>
</html>

在<script type="module"> 标签中，我导入了SomeClass，其中包含一个名为object 的属性：

export default class SomeClass {
    constructor() {
        this.object = {
            name1: { ... },
            name2: { ... },
            ...
        };
    }
}

这里的问题是 Vue.js 对 object 中的更改做出反应（如果我使用 watch 检查它）但它不会更新我的 HTML：

<div v-for"..." v-bind:key="...">...</div>.

当新属性添加到object/旧属性更新时，我可以做些什么来让 Vue.js 更新我的 HTML？

【问题讨论】：

标签： javascript html vue.js es6-modules

【解决方案1】：

Vue 有一种方法可以为 data 属性中的项目添加属性（因此它们保持反应性）。（更多信息：https://vuejs.org/v2/api/#Vue-set）

下面的 sn-p 可以帮助您查看实际的方法：

class SomeClass {
  constructor() {
    this.object = {
      name1: {
        name: 'name3'
      },
      name2: {
        name: 'name4'
      }
    }
  }
}

const myClass = new SomeClass()

new Vue({
  el: "#app",
  computed: {
    // transforming array for reactive display
    transformedObj() {
      const ret = []
      this.keyVal().forEach(e => {
        e.forEach(el => {
          ret.push(el)
        })
      })
      return ret

    }
  },
  data: {
    object: myClass.object
  },
  methods: {
    // transforming object for better display
    keyVal() {
      return Object.keys(this.object).map(e => {
        return Object.entries(this.object[e]).map(([k, v]) => {
          return `${k}: ${v}`
        })
      })
    }
  },
  mounted() {
    // add new property (reactive)
    Vue.set(this.object.name1, 'newProperty', '2')

    // or add new property (reactive)
    this.$set(this.object.name2, 'localNewProperty', 45)
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(item, key) in transformedObj">{{item}}</li>
  </ul>
  Object: {{transformedObj}}
</div>

【讨论】：