【发布时间】：2019-11-27 04:26:49
【问题描述】：
我有一个对象属性，它可以监听用户输入或可以被视图更改。 用下面的截图：
- 如果我输入了某些内容，我的输入值就会更新，
widget.Title.Name也会更新。 - 如果我点击“外部更新”按钮，
widget.Title.Name属性会更新，但不会更新我上面字段中的值。
预期结果：widget.Title.Name改变时，可编辑文本的值需要同时更新。
我不明白为什么没有更新，如果我在 vue 检查器中检查我的属性，我的所有字段（widget.Title.Name 和Value）都正确更新，但 html 没有更新。
Vue.component('editable-text', {
template: '#editable-text-template',
props: {
value: {
type: String,
default: '',
},
contenteditable: {
type: Boolean,
default: true,
},
},
computed: {
listeners() {
return { ...this.$listeners, input: this.onInput };
},
},
mounted() {
this.$refs["editable-text"].innerText = this.value;
},
methods: {
onInput(e) {
this.$emit('input', e.target.innerText);
}
}
});
var vm = new Vue({
el: '#app',
data: {
widget: {
Title: {
Name: ''
}
}
},
async created() {
this.widget.Title.Name = "toto"
},
methods: {
externalChange: function () {
this.widget.Title.Name = "changed title";
},
}
})button{
height:50px;
width:100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<editable-text v-model="widget.Title.Name"></editable-text>
<template>Name : {{widget.Title.Name}}</template>
<br>
<br>
<button v-on:click="externalChange">External update</button>
</div>
<template id="editable-text-template">
<p ref="editable-text" v-bind:contenteditable="contenteditable"
v-on="listeners">
</p>
</template>我搜索了很多关于类似问题的主题，但它们存在反应性问题，我认为我的输入存在特定问题。你知道发生了什么吗？我尝试添加一个监听器来更改事件，但它没有在widget.Title.Name 更改时触发。
【问题讨论】：
-
v-model是 v-bind:value and v-on:input 的简写 - contenteditable p 没有值。您可能需要改用观察者或计算值。有关这方面的更多信息，请参阅this stackoverflow question。 -
它具有来自组件的值，这可能很奇怪，但这就是它与 contenteditable 一起工作的方式。它来自这里：stackoverflow.com/a/53899854/8237280
-
我尝试使用带有 getter 和 setter 的计算属性，但它不起作用并在 stackoverflow 中完成。我现在使用一个观察者，但它现在并不完美，因为每次输入都会更新值，并且光标会回到位置 0（所以你写错了方向......）我正在调查......感觉使用您的 anwser 免费添加示例/代码 sn-p :)
标签： javascript html vuejs2