javascript - [Vue warn]: Failed to resolve directive: ref - Stack Overflow

I'm learning about Components in Vue.js.

The template is:

<script type="text/template" id="child1">
    <h3>This is the child1~!</h3>
</script>
<script type="text/template" id="child2">
    <h3>This is the child2~!</h3>
</script>
<script id="parent" type="text/template">
    <div>
        <h2>This is the parent~!</h2>
        <child1 v-ref:cc1></child1>
        <child2 v-ref:cc2></child2>
        <button v-on:click="getChildren">get children msg</button>
    </div>
</script>

and the JS is:

    Vueponent('parent', {
        template: '#parent',
        methods: {
            getChildren:function() {
                alert(this.$refs1);
                alert(this.$refs2);
            }
        },
        ponents: {
            'child1': {
                template: '#child1',
                data: function() {
                    return {
                        msg: 'This is the child1 ~!'
                    }
                }
            },
            'child2': {
                template: '#child2',
                data: function() {
                    return {
                        msg: 'This is the child2 ~!'
                    }
                }
            }
        }
    });

Vue throws

warn:vue.js:525 [Vue warn]: Failed to resolve directive: ref (found in ponent )

Who can tell me why? Thanks!

I'm learning about Components in Vue.js.

The template is:

<script type="text/template" id="child1">
    <h3>This is the child1~!</h3>
</script>
<script type="text/template" id="child2">
    <h3>This is the child2~!</h3>
</script>
<script id="parent" type="text/template">
    <div>
        <h2>This is the parent~!</h2>
        <child1 v-ref:cc1></child1>
        <child2 v-ref:cc2></child2>
        <button v-on:click="getChildren">get children msg</button>
    </div>
</script>

and the JS is:

    Vue.ponent('parent', {
        template: '#parent',
        methods: {
            getChildren:function() {
                alert(this.$refs1);
                alert(this.$refs2);
            }
        },
        ponents: {
            'child1': {
                template: '#child1',
                data: function() {
                    return {
                        msg: 'This is the child1 ~!'
                    }
                }
            },
            'child2': {
                template: '#child2',
                data: function() {
                    return {
                        msg: 'This is the child2 ~!'
                    }
                }
            }
        }
    });

Vue throws

warn:vue.js:525 [Vue warn]: Failed to resolve directive: ref (found in ponent )

Who can tell me why? Thanks!

• javascript
• vue.js

Share Improve this question Follow edited Jan 13, 2017 at 6:02 K Scandrett 16.5k44 gold badges4242 silver badges6868 bronze badges asked Jan 13, 2017 at 5:09 JohnhorseJohnhorse 2311 gold badge11 silver badge44 bronze badges 1

• Are you using pug/jade templates in your ponents? – Soviut Commented Jan 13, 2017 at 6:05

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

You are using Vue 2.0 with Vue 1.0 grammar:

see the migration documentation:

https://v2.vuejs/v2/guide/migration.html#v-el-and-v-ref-replaced

So, you should use:

<child1 ref="cc1"></child1>
<child2 ref="cc2"></child2>

Or change the Vue version back to 1.x

Unless you are using Pug (formerly Jade) in your ponent templates, you need to use HTML:

template: '<div id="parent"></div>',