v-if 切换消息导致无限更新循环 Vue 警告答案

【问题标题】：v-if to toggle message is resulting in infinite update loop Vue warningv-if 切换消息导致无限更新循环 Vue 警告
【发布时间】：2020-04-07 20:46:09
【问题描述】：

我正在学习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.
（在中找到）"

应该如何修改代码才能正常工作？

【问题讨论】：

标签： vue.js

【解决方案1】：

问题在于 vue 将 :on-press="seen = !seen" 视为绑定，因此它总是在渲染时执行表达式。渲染正在修改状态，从而导致无限循环。

我认为你只需要在一个函数中提取它。

<template>
    <view class="container">
        <button :on-press="onPress" 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
    };
  },
  methods: {
    onPress() {
      this.seen = !this.seen;
    }
  }
};
</script>

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

【讨论】：

【解决方案2】：

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

【讨论】：

啊哈！这是一个有用的解释。但是，当我将按钮代码更改为您提供的行并剥离 onPress() 方法逻辑时，未显示“无限更新循环”错误，但单击按钮不会切换消息。为什么会这样？
我对 Vue 原生 :on-press 绑定不是很熟悉，但你能尝试在 onPress() 方法中添加一些调试代码，比如 alert()。我怀疑该方法不是通过点击触发的。