时间戳

首页 > 解决方案 > 在 Vue 数据中分配相同的值不会在 dom 中改变

vue.js - 在 Vue 数据中分配相同的值不会在 dom 中改变

问题描述

当我在 Vue 数据中分配相同的值时，我想在 dom 中更改或反映。请查看评论以获取更多详细信息。当我分配相同的值时，dom 永远不会改变。

<div id="app">
    <div>
        <span 
        contenteditable="true" 
        v-text="setting.change_setting_value === null ? setting.setting_default_value : setting.change_setting_value"
        @blur="changeSetting"
        >
    </span>
    </div>
</div>


const app = new Vue({
el: "#app",
data: {
    setting_default_value: "default value",
    change_setting_value: null
},
method: {
    changeSetting(evt) {
        if(evt.target.innerText === "") {
           // dosen't change in the dom because setting_default_value never change its is the same value as before 
           // now i want to know how can i change back the contenteditable span when i assign the same value
           // i don't want to touch the dom 
            this.setting.setting_default_value = "default value" // not reflect in the dom what i can do to change the effect

           // if i change the default value something else it will change in the dom in this case its the span element
            this.setting.setting_default_value = "change value" // reflect in the dom
        } else {
            this.setting.change_setting_value = "setting value has been change"
        }
    }
}
});

标签： vue.js

解决方案

为什么分配相同的值时需要刷新dom？无论如何，如果是针对某些特殊情况，请尝试this.$forceUpdate()- 请参阅https://vi.vuejs.org/v2/api/#vm-forceUpdate

推荐阅读