时间戳

首页 > 解决方案 > v-if 切换消息导致无限更新循环 Vue 警告

vue.js - v-if 切换消息导致无限更新循环 Vue 警告

问题描述

我正在学习Vue Native，特别是v-if条件，并且有以下测试代码：

<template>
  <view class="container">
      <button :on-press="seen = !seen" title="Click to Toggle Message Visibility" />
      <text v-if="seen">Now you see the message</text>        
  </view>
</template>

<script>
export default {
  data: function() {
    return {
      seen: false
    };
  }
};
</script>

<style>
.container {
  flex: 1;
  align-items: center;
  justify-content: center;
}
</style>

它应该让用户单击按钮并且消息将出现/消失。但是，它会导致以下错误：
console.error: "[Vue warn]: You may have an infinite update loop in a component render function.
(found in )"

应该如何修改代码以使其正常工作？

标签： vue.js

解决方案

同意接受的答案。另外，:on-press是属性绑定，但是使用v-on事件绑定不会有这个死循环的问题，比如<button v-on:click="seen = !seen" title="Click to Toggle Message Visibility" />. 这可能就是您从中获得此内联方法用法seen = !seen的地方。

推荐阅读