[Vuejs]-V-if to toggle message is resulting in infinite update loop Vue warning

by

0👍

✅

The problem is that vue is treating :on-press="seen = !seen" like a binding so it always executes the expression on render. The rendering is modifying the state, hence causing an infinite loop.

I think you just need to extract it in a function.

<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>

0👍

Agree with the accepted answer. In addition, the :on-press is an attribute binding, but using v-on event binding will not have this infinite loop issue, for example, like <button v-on:click="seen = !seen" title="Click to Toggle Message Visibility" />. That’s probably where you get this inline method usage seen = !seen from.

Leave a comment