kundefine
1 month ago
667
8
Vue

assign same value in the Vue data doesn't change in the dom

Posted 1 month ago by kundefine

i want to change or reflect in the dom when i assign same value in the Vue data. I am really bad at explaining, sorry for that. please check the comment for more details.

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

Please sign in or create an account to participate in this conversation.