Vue.js 2:计算出的数据更改时不更新
Vue.js 2:计算出的数据更改时不更新
提问于 2019-02-02 20:35:18
HTML：
<div id="app">
<h3>My identicon generator</h3>
<div>
input:
<input v-on:input="onInput"/>
</div>
<div>
output:
<div v-html="identicon"></div>
</div>
</div>JS：
new Vue({
el: '#app',
data: {
textInput: '',
},
computed: {
identicon: function() {
console.log('new identicon for:', this.textInput);
return jdenticon.toSvg(this.textInput, 200);
}
},
methods: {
onInput: (e) => {
this.textInput = e.target.value;
console.log('is it set?', this.textInput);
}
}
});Codepen：https://codepen.io/anon/pen/JxNrNP
我希望在输入字段中输入文本时，标识会得到更新。console.log(is it set?', this.textInput)运行正常，控制台中会显示textInput的最新值。但是，console.log('new identicon for:', this.textInput)仅在加载页面时运行，并且不会再次运行，这导致标识保持原样。为什么textInput更改时不调用computed方法？我该如何解决这个问题？
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-02-02 20:46:21
我做了一些修改，现在它起作用了。1.-将数据对象更改为返回对象的函数2.-将@input更改为v-model
new Vue({
el: '#app',
data(){
return {
textInput: '',
}
},
computed: {
identicon() {
console.log('new identicon for:', this.textInput);
return jdenticon.toSvg(this.textInput, 200);
}
},
methods: {
onInput: (e) => {
this.textInput = e.target.value;
console.log('is it set?', this.textInput);
}
}
});按照预期工作。
https://codepen.io/anon/pen/ZwKazg?editors=1111
然而，我也修复了你的组织，这也行得通，你的问题与你的onInput方法和恒等计算属性的作用域有关。
这行得通，我把它们都改成了ES6函数。
new Vue({
el: '#app',
data: {
textInput: '',
},
computed: {
identicon() {
console.log('new identicon for:', this.textInput);
return jdenticon.toSvg(this.textInput, 200);
}
},
methods: {
onInput(e) {
this.textInput = e.target.value;
console.log('is it set?', this.textInput);
}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54493131
复制相关文章
相似问题
腾讯云开发者
