Vue.js 不更新 HTML

Question

我的本地 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？

Answer 1

Vue有一種方法可以為數據屬性中的項目添加屬性（因此它們保持反應性）。 （更多信息： https ://v2.vuejs.org/v2/api/#Vue-set）

下面的代碼片段可以幫助您查看實際的方法：

 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>

Vue.js 不更新 HTML

問題描述

1 個解決方案

解決方案1
0 2019-12-11 08:05:12

Vue.js 不更新 HTML

問題描述

1 個解決方案

解決方案1 0 2019-12-11 08:05:12

解決方案1
0 2019-12-11 08:05:12