组件渲染函数中的无限更新循环
[英] Infinite update loop in a component render function
本文介绍了组件渲染函数中的无限更新循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图了解 vue 组件是如何工作的.最终目标是在我单击 Go! 时向只读 textarea 添加一行！按钮.目前我坚持使用以下代码:
//注册组件Vue.component('聊天区', {分隔符:['${', '}'],道具:['味精']，模板:'<textarea readonly=""rows="20">${msg}</textarea>',})//创建一个根实例var app = new Vue({el: '#app',分隔符:['${', '}'],数据: {留言: ['来自 Vue 的你好！',其他线路……"],},方法: {get_msg: 函数 () {返回 this.messages.reverse().join('\n');}}})
以下 html 以我想要的方式呈现 - 消息以相反的顺序显示:
<div class="row"><div class="col-md-8 offset-md-2"><form action="/question" enctype="multipart/form-data" method="get" v-on:submit.prevent="onSubmit"><div class="input-group"><input type="text" class="form-control" placeholder="Say something..."><span class="input-group-btn"><button class="btn btn-secondary" type="button">Go!</button></span>
</表单>
<div class="row" style=""><div class="col-md-8 offset-md-2"><chatarea :msg="get_msg()"></chatarea>
但是我收到以下警告:
<块引用>
[Vue 警告]:组件渲染函数中可能存在无限更新循环.
我知道我做错了什么...这里是 JSFiddle
解决方案
你的模板调用 get_msg ，它重新计算反向消息数组，导致模板重新渲染并调用 get_msg等
相反，使用计算.
计算:{反向消息(){return this.messages.slice().reverse().join('\n');}},
并将您的模板更改为
示例.
I'm trying to understand how vue components work. The final goal is to add a line to the readonly textarea when I click my Go! button. At present I'm stuck with the following code:
// Register components
Vue.component('chatarea', {
delimiters: ['${', '}'],
props: ['msg'],
template: '<textarea readonly="" rows="20">${msg}</textarea>',
})
// Create a root instance
var app = new Vue({
el: '#app',
delimiters: ['${', '}'],
data: {
messages: [
'Hello from Vue!',
'Other line...'
],
},
methods: {
get_msg: function () {
return this.messages.reverse().join('\n');
}
}
})
The following html is rendered in the way I want it - messages are displayed in reverse order:
<div class="container" id="app">
<div class="row">
<div class="col-md-8 offset-md-2">
<form action="/question" enctype="multipart/form-data" method="get" v-on:submit.prevent="onSubmit">
<div class="input-group">
<input type="text" class="form-control" placeholder="Say Something...">
<span class="input-group-btn">
<button class="btn btn-secondary" type="button">Go!</button>
</span>
</div>
</form>
</div>
</div>
<div class="row" style="">
<div class="col-md-8 offset-md-2">
<chatarea :msg="get_msg()"></chatarea>
</div>
</div>
</div>
However I'm getting the following warning:
[Vue warn]: You may have an infinite update loop in a component render function.
I understand I'm doing something wrong... Here's JSFiddle
解决方案
Your template calls get_msg which recalculates the reversed message array which causes the template to re-render and call get_msg, etc.
Instead, use a computed.
computed:{
reversedMessages(){
return this.messages.slice().reverse().join('\n');
}
},
And change your template to
<chatarea :msg="reversedMessages"></chatarea>
Example.
这篇关于组件渲染函数中的无限更新循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
