Question

我只是在试验Vue.js，并且遇到了Vue.js更新组件似乎不一致的行为。（注释掉＆lt; span＆gt;会触发我期望的行为。）

问题是单击按钮会更新按钮文本，但不会导致组件文本更新（“更新”也应该增加）。它将按钮数量滞后一个。（在浏览器中使用vue devtools显示数据已更改但不更新DOM。）

这是一个jsfiddle：increment problem，代码如下。

现在取消注释＆lt; span＆gt;通过添加 - >阻止到第一个＆lt; - 行，更新现在按预期在＆lt; span＆gt;中工作和组件。以下是取消注释部分的jsfiddle：increment works。

为什么组件更新会发生变化？

HTML：

<div id="app">

<!--
<span
    v-for='(count, state) in stateChanges'>
    {{state}}: {{count}} 
</span><br/>
<!-- -->

<state-changes
    :states='["created", "mounted", "updated"]'
    :counters='stateChanges'>
</state-changes>

<button v-on:click="doCount"> {{count}}</button>    
</div>

JavaScript的：

Vue.component('state-changes', {
    props: ['states', 'counters'],
    template: `<p><span v-for="state in states">{{state}}: {{counters[state]}} </span></p>`,
});

var app = new Vue({
    el: '#app',
    data: {
        stateChanges: {
            created: 0,
            mounted: 0,
            updated: 0,
            destroyed: 0
        },
        count: 0,
    },
    methods: {
        doCount() {
            this.count += 1;
        },
    },
    created() {this.stateChanges.created++},
    mounted() {this.stateChanges.mounted++},
    updated() {
        this.stateChanges.updated++
        },
    destroyed() {this.stateChanges.destroyed++},
});

Vue.js组件更新不一致

0 个答案: