我是Vue JS的初学者。我必须在一个组件中使用一个变量,它的值经常变化。所以当我在data()下声明和定义它时,Chrome控制台
中会出现以下警告
因为当data()变量发生变化时,Vue框架会自动调用render函数。
除了在data()方法中声明变量之外,还有其他方法可以声明和使用变量吗?
<template>
<ul>
<div v-for="(list,index) in itemlist" :key="index">
<div v-if="!isFirstCharSame(list.label)" >{{ firstChar }} </div>
<li>
<span>{{ list.label }}</span>
</li>
</div>
</ul>
</template>
<script>
export default {
data() {
return {
itemlist: [
{"label":"Alpha"},
{"label":"Beta"},
{"label":"Charlie"},
{"label":"Delta"}],
firstChar:"$"
}
},
methods : {
isFirstCharSame: function(str) {
if(str.startsWith(this.firstChar)) {
return true;
}
this.firstChar = str.charAt(0);
return false;
}
}
}
</script>
预期输出应如下所示
在组A中,它应显示以A开头的所有元素
2条答案
按热度按时间q3qa4bjr1#
下面我们将使用一个computed属性来确保它按字母顺序排序,然后呈现你的第一个字符。虽然你应该使用grouping imo。
是的,你可以随时更新你的数据,组件会重新渲染来反映它。
xcitsw882#
您可以在组件中的方法或计算属性等内部声明变量,但它们不能从模板或代码的其余部分访问,也不是被动的。
要使它们成为React式的,并且可以从更高的作用域访问它们,唯一的方法是通过以下方式将
data
属性添加到组件中:或
除此之外,错误的原因是你在渲染中改变了变量的状态。当这种情况发生时,Vue会重新渲染模板,因为值已经改变,并再次调用函数,* 瞧 *:这就是一个无限循环。
您可能应该检查正在调用的函数,并尝试将
data
属性中的变量替换为从实际data
变量获取数据的局部变量。