CODEWITHSUNDEEP
javascriptvue.js
recursive
recursive

Reputation: 86064

Vue.js: Why is my v-else directive causing my element to be rendered multiple times?

I'm trying out vue.js, and so far it seems pretty nice. I've run into some unexpected behavior though, and I can't tell if it's a bug, or intentional. Under some circumstances, a v-else directive is causing my element to render multiple times. I've reduced it to a minimal reproduction.

Try clicking the "go" button, and note that more and more "no" paragraphs appear. I would expect that there would only ever be 1, at most.

var d = { n: null };
new Vue({
  el: 'body',
  data: d,
  methods: {
    go: function() { d.n = d.n == null ? 0 : null; }
  }
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.3/vue.min.js"></script>

<p v-if="n">yes</p>
<p v-else>no</p>

<button v-on:click="go()">go</button>

I can find workarounds that allow me to get my expected behavior, but before I start adding hacks to my code-base, what's going on?

Upvotes: 2

Views: 160

Answers (1)

recursive
recursive

Reputation: 86064

Evan You verified that this is a bug. And fixed it.

All before I woke up.

Upvotes: 2

Related Questions