Vue: Repeated inline-template within v-if is wrongfully reused

[guidobouman]

Vue.js version

2.0.6 (latest)

Reproduction Link

http://codepen.io/guidobouman/pen/qqajGr

Steps to reproduce

Repeat a conditional (v-if, not v-show) check with an inline-template component inside.

What is Expected?

When changing the value, the conditional check should display the right child component. Which in turn displays it's own inline-template with the unique value.

What is actually happening?

The first time a value (for the v-if) is selected, the right inline-template is being used. When you change the value afterwards the inline-template from the first value is being re-used each time.

Additional info

When none of the conditional checks hit (by selecting the value 0), the state is reset. The next matching value that's selected will display the correct value again.

So: As long as one of the conditional checks matches, the template is not being reset.

[guidobouman]

Temporary workaround:

  export default {
    props: [ 'subject' ],
    data() {
      return {
        subjectProxy: this.subject,
      }
    },
    computed: {
      selectedSubject: {
        get() {
          return this.subjectProxy
        },
        set(value) {
          if(this.subjectProxy == value) {
            return;
          }

          this.subjectProxy = '';
          this.$nextTick(() => {
            this.subjectProxy = value;
          })
        }
      }
    }
  };

[defcc]

Thanks @guidobouman, I'll take a look.

[LinusBorg]

key the dynamic components accordingly:

<div is="child" inline-template :key="value">

Unfortunately, the docs are not very clear on this currently, but this is expected behaviour.

As stated somewhere else, about switching between elements:

When toggling between elements that have the same tag name, you must tell Vue that they are distinct elements by giving them unique key attributes. Otherwise, Vue’s compiler will only replace the content of the element for efficiency.

https://vuejs.org/v2/guide/transitions.html#Transitioning-Between-Elements

It works similary for dynamic components.

@chrisvfritz Can you think of a better place in the docs to mention / expand on this?

[guidobouman]

@LinusBorg Thanks for getting back to me.

Does the key work even when not using a v-repeat? Then I think this should be explained in the conditionality section of the docs (https://vuejs.org/v2/guide/conditional.html).

[guidobouman]

v-for in the api has a reference to key in it's see also: section. Adding this reference to v-if in addition to the guide would make it even clearer.

[yyx990803]

@guidobouman yep, we are working on it, thanks for the suggestion!

[LinusBorg]

Further discussion of docs improvement on this topic here: vuejs/vuejs.org#587