Vue: dynamic component is vs :is

[gsouf]

I was trying to implement dynamic component as explained here: http://vuejs.org/guide/components.html#Dynamic-Components

Not sure if it's a problem with the documentation or a bug but the example in the documentation does not work, had to remove the colon in front of :is to get it working

Vue.js version

1.0.26 (developement)

What is Expected?

Using <component :is="..."> didnt work as the documentation explains

What is actually happening?

<component is="..."> (is instead of :is) worked

[fnlctrl]

Hi! Thanks for filling the issue, but I'm afraid the information you provided is not enough.
Can you provide a live example on jsfiddle, codepen etc.?

[gsouf]

Well, I think the explanation was clear but here is fiddle:

https://jsfiddle.net/g434h76f/

[gsouf]

Sorry, the previous fiddle did not prove what component syntax was working, you can use this one https://jsfiddle.net/g434h76f/1/

[gsouf]

Looing at the source.

Here vue looks for :is attribute: https://github.com/vuejs/vue/blob/63dbc1ca10d1663cb379ca7bd255d0ae3e836673/src/util/component.js#L80

But here it is looking for both of :is and is https://github.com/vuejs/vue/blob/e3057f22b38a7559a69406171db97d60d59822b8/src/directives/internal/component.js#L58

[yyx990803]

When you have a colon it becomes an expression and is referring to a dynamic variable. However what you are doing it trying to refer to a static component id.

It's like the difference between view and "view" in JavaScript.

[gsouf]

@yyx990803 did you read at my message ? That makes me furious to see that you dont intend to fix the doc

[yyx990803]

@gsouf don't you realize the difference between the example you provided and the example in the docs?

[gsouf]

Well the example in the doc does not work for me, do you realize that something is not clear in the way it's explained?

[yyx990803]

not working? https://jsfiddle.net/evtyof52/

[yyx990803]

:is, similar to all other bindings that start with :, interprets the attribute value as a JavaScript expression instead of a plain string. Does that make it clear for you?

[gsouf]

Ok I see, but is without colon is not explained in the doc, I think it should because it's the behavior I was looking for

[yyx990803]

@gsouf we will try to incorporate that.

[posva]

@gsouf The example in the documentation is working. Looking at your example you seem to have ignored this part:

new Vue({
  el: 'body',
  data: {
    currentView: 'home'
  },
  components: {
    home: { /* ... */ },
    posts: { /* ... */ },
    archive: { /* ... */ }
  }
})

[gsouf]

@posva Yes I figured out what I didnt understand, but at a starting point with vue.js I was just doing trivial tests with the component system to see if it fits my needs and confused with :is and is. Because I didnt know the difference I though it was either a bug or a documentation typo (that is common in big documentations)

[gsouf]

Well, the confusion also comes from the fact I was trying to create my component from the example here: http://vuejs.org/api/#Vue-component missing the part tat you mentioned

[LinusBorg]

Ok I see, but is without colon is not explained in the doc, I think it should because it's the behavior I was looking for

To be fair, the general behaviour of props with a leading colon _is_ explained in the docs, in the chapter about Data Binding Syntax and their shortcuts: http://vuejs.org/guide/syntax.html#v-bind-Shorthand

But I can see how that is not obvious to someone scanning the docs for a specific topic.

I therefore think we should try and change docs to use the longhand version for all bindings (v-bind:prop-name="expression").

So the example would then look like this:

<component v-bind:is="currentView">
  <!-- component changes when vm.currentview changes! -->
</component>

Which would tell someone new to Vue that he/she has to look up v-bind in order to fully get what is going on.

[mikekidder]

For completeness, you could also add a mention to not confuse the ":is" binding for components as with all bindings takes an expression, with versus the "is" special attribute takes a static string related to Vue template rendering.

It is documented under template rendering.. http://vuejs.org/guide/components.html#Template-Parsing

[yyx990803]

@mikekidder they are the same thing... just that one takes an expression and the other a static string.

[mikekidder]

Ah, OK still learning :) I corrected above, is that a better statement?

[LinusBorg]

@mikekidder I don't think that it makes sense to explain this for the is attribute specifically - it works just like any other prop in Vue.

We have documented how to use props as well as common pitfalls throughout the documentation, e.g. here: http://vuejs.org/guide/components.html#Literal-vs-Dynamic

[mikekidder]

Yes, entirely right.. I just read that section myself. :) Thanks. Well explained there..