How to pass data from a component to an Instance in Vue

Question

I am trying to get data from a component and pass it to a variable in my root Vue instance.

My Vue Instance:

new Vue({
    el: '#root',
    data: {
        searchResultObject: ''
    },
    methods: {
        //....
    }
});

My Global Component:

Vue.component('user-container-component', {
    props: {
        prop: null
    },
    template: '#user-container-template',
    data: function () {
        return {
            searchResultObject: ''
        }
    },
    methods: {
        dbSearch_method: function () {
            var self = this;
            $.ajax({
                url: 'Home/LocalSearch',
                type: 'GET',
                success: function (response) {
                    self.searchResultObject = response;
                },
                error: function () {
                    alert('error');
                }
            });
        }
    }
})

Pressing a button in my UI triggers the dbSearch_method, that part works. I am wondering how I get the data to the searchResultObject in my instance, not the component?

HTML:

<button class="btn btn-link bold" v-on:click="dbSearch_method">{{item}}</button></li>

EDIT:

HTML:

<div id="root">
    //...
    <div id="collapse2" class="panel-collapse collapse">
        <ul class="list-group">
            <root-component v-for="item in customerObject"
                            v-bind:prop="item"
                            v-bind:key="item.id">
            </root-component>
        </ul>
    </div>
</div>
//...

<script type="text/x-template" id="root-template">
        <li class="list-group-item">
            <div class="bold">
                <button v-if="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down" style="color: black"></span></button>
                <button v-else="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-right" style="color: black"></span></button>
                <button class="btn btn-link bold">{{prop.name}}</button>
            </div>
            <ul class="no-bullets" v-show="open">
                <park-container-component v-bind:prop="prop.parks"/>
                <admin-container-component v-bind:prop="prop.admins" />
                <user-container-component v-on:search-results-fetched="addSearchResults($event)" v-bind:prop="prop.admins" />
            </ul>
        </li>
    </script>

 <script type="text/x-template" id="user-container-template">
        <li class="list-group-item">
            <div class="bold">
                <button v-if="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down" style="color: black"></span></button>
                <button v-else="open" v-on:click="toggle" class="btn btn-link"><span class="glyphicon glyphicon-chevron-right" style="color: black"></span></button>Users
                <button class="btn btn-primary btn-xs pull-right" data-toggle="modal" data-target="#inviteAdminModal">Add</button>
            </div>
            <ul class="no-bullets" v-show="open" v-for="item in prop">
                <li><button class="btn btn-link bold" v-on:click="dbSearch_method">{{item}}</button></li>
            </ul>
        </li>
    </script>

Script:

new Vue({
    el: '#root',
    data: {
        //...
        searchResultObject: ''
    },
    methods: {
        //...
        addSearchResults: function(data) {
            alert('adding');
            this.searchResultObject = data;
        }
    }
});
Vue.component('user-container-component', {
    props: {
        prop: null
    },
    template: '#user-container-template',
    data: function () {
        return {
            open: false
        }
    },
    methods: {
        toggle: function () {
            this.open = !this.open;
        },
        dbSearch_method: function () {
            var self = this;
            $.ajax({
                url: 'Home/LocalSearch',
                type: 'GET',
                success: function (response) {
                    self.$emit('search-results-fetched', response);
                },
                error: function () {
                    alert('error');
                }
            });
        }
    }
})

is user-container-component component a direct child of the element with id #root? — Vamsi Krishna
– Vamsi Krishna, Commented Oct 24, 2017 at 9:38
Do you mean if it's inside the <div id="root">? Then yes, but it is not inside the root Instance in my Script. It is a Global Component. At least I think it count's as a child for the <div id="root">, it's a component called from another component (that is inside <div id="root">), if that makes sense. — Green_qaue
– Green_qaue, Commented Oct 24, 2017 at 9:40

Vamsi Krishna · Accepted Answer · 2017-10-24 09:49:54Z

2

As you said the component user-container-component is inside element with id #root, assming your html to be like this:

<div id="root">

    <user-container-component></user-container-component>
</div>

in your user-container-component emit an event in the succss callback of your dbSearch_method ajax request like this:

Vue.component('user-container-component', {
    props: {
        prop: null
    },
    template: '#user-container-template',
    data: function () {
        return {
            searchResultObject: ''
        }
    },
    methods: {
        dbSearch_method: function () {
            var self = this;
            $.ajax({
                url: 'Home/LocalSearch',
                type: 'GET',
                success: function (response) {
                    this.$emit('search-results-fetched', response);
                },
                error: function () {
                    alert('error');
                }
            });
        }
   }
})

in your html setup an event listener on the user-container-component like this:

<div id="root">

    <user-container-component @search-results-fetched="addSearchResults($event)"></user-container-component>
</div>

in your root instance add addSearchResults method:

new Vue({
    el: '#root',
    data: {
        searchResultObject: ''
    },
    methods: {
        addSearchResults(data){
            this.searchResultObject = data;
        }
    }
});

answered Oct 24, 2017 at 9:49

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Green_qaue Over a year ago

Awesome this looks like what I need, get back to you in around an hour, ASAP.

Green_qaue Over a year ago

I just added an edit. I tried adding everything as you showed, but method addSearchResult is never called. I added every relevant piece of code I can think of. Notice that the <script> templates are not inside the root div, but since they are called from within that div that shouldnt matter?

Vamsi Krishna Over a year ago

@Green_qaue it shall work.. can you reproduce it in a jsfiddle ao it can be debugged easily

Green_qaue Over a year ago

Okay, Ill try! :)

Green_qaue Over a year ago

While writing the JS fiddle I realised, I actually have a middle-step in the root component. So I added another event inside that component that sent it to the actual Vue Instance, and it works :D

Fan Cheung · Accepted Answer · 2017-10-24 09:47:54Z

0

You can emit the value as an event for parent to listen to

$.ajax({
            url: 'Home/LocalSearch',
            type: 'GET',
            success: function (response) {
                self.searchResultObject = response;
                this.$emit('onSearchResult', response)
            },
            error: function () {
                alert('error');
            }
        });

then in your parent you can fetch it by setup a listener

<user-container-component v-on:onSearchResult="parentListener"/>

answered Oct 24, 2017 at 9:47

Fan Cheung

11.5k3 gold badges21 silver badges42 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 04:34:29Z

0

For a big project, you can use vuex to manage the data.

Or you can just use eventbus to solve the same level component data transmission.here

For your situation, I think it should use $emit.

dbSearch_method: function () {
        var self = this;
        $.ajax({
            url: 'Home/LocalSearch',
            type: 'GET',
            success: function (response) {
                self.searchResultObject = response;
                this.$emit('customEvent', response);
            },
            error: function () {
                alert('error');
            }
        });
    }

and in your root vue instance,you can use $on to listen the event fire.here

edited Jul 16, 2022 at 4:34

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Oct 24, 2017 at 9:51

shauvet

961 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to pass data from a component to an Instance in Vue

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related