Vue-router: Bug: Weird Vue Warnings fragment instance related

[Hebilicious]

Since I migrated from Vue 1.0.0 migration to 1.0.10, vue router(0.7.7) is raising those 'weirds' warnings, here's one from one of my projects :

What's weird is that the attributes are passed correctly from the parent to the child. Here is the markup :

    <router-view
        :operation.sync="operation"
        :phone-taxes.sync="phoneTaxes"
        :interviews.sync="interviews"
        :daily-interviews.sync="dailyInterviews"
        :google-calendar-id.sync="googleCalendarId"
    >
    </router-view>

I'm using a simple route map :

router.map({
  '/details':  {
    component: Details
  }
...

My components are using props and they can access the data passed from the router-view properly. I've tried to modify said data from the components and everything is correctly reflected to the parent, so the .sync is definitely working.
Any idea what this bug is about?

[yyx990803]

It seems you are trying to pass all these props down, but your different route components have different props? e.g. if a route component expects only one of these props, Vue will try to compile the other ones as normal attribute bindings, and thus leading to the warning.

[Hebilicious]

Ah yes that' exactly that! So how do I get rid of that? Is it possible to specify that component1 should ignore prop2 or should i accept every props in each components?

[yyx990803]

The easy solution is just give a root node to all your route components.

[Hebilicious]

Do you mean that given :

router.map({
'/route1': { component: Component1 },
'/route2': { component: Component2 }
})

something like that will work ?:

<router-view>
    <component1 :prop1="data"></component1>
    <component2 :prop2="data2"></component2>
</router-view>

Can't make it work :/ Can you provide a little example pretty please:)

[yyx990803]

No, read about fragment instance here.

This means in a component's template, instead of

<a>xxx</a>
<a>xxx</a>

Wrap them with a root element:

<div>
  <a>xxx</a>
  <a>xxx</a>
</div>

[Hebilicious]

Ok got it ! Perhaps you could add that example to the doc? I didn't get the fragment instance until your answer. Thanks for creating vue, I'm in love with javascript thanks to you :D

[yyx990803]

Added to doc. Glad to know it helps :)

[oberoivarun]

@yyx990803 Hey! I wrapped my template in a div but i'm getting the same error about fragment instances.

HTML file:

<div id="app">
    <my-button cls="default"></my-button>
</div>

my-button.vue:

<template>
<div>
    <button :class="alertClasses">
        My Button
    </button>
</div>
</template>

<script>
    export default { 

        props: ['cls'],

        computed: {
            alertClasses(){
                var type = this.type;

                return {
                    'btn': true,
                    'btn-default': type == 'default',
                    'btn-danger' : type =='danger'
                };
            },
        }
    };
</script>

main.js:

import MyButton from './vue/my-button.vue';

new Vue({
    el: '#app',

    components: {
        MyButton,
    }
});

Love Vue! Just started learning components.

[avramovic]

@oberoivarun Have you managed to solve it? I have switched from plain html/js to browserify/vueify and started to get these warnings. Have no idea what's going on :S (everything worked with plain html/js). I'm getting these warnings even if my template is just this:

<template>
  <div>Hello world</div>
</template>

(+ I don't see "Hello world" in my browser)

cc: @yyx990803

[avramovic]

Nevermind, it was a laravel-elixir-vueify issue. Upgrading it solved the problem :)