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

0
votes

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');
                }
            });
        }
    }
})
3
javascriptvue.js
is user-container-component component a direct child of the element with id #root? – Vamsi Krishna
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

3 Answers

2
votes

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;
        }
    }
});
0
votes

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"/>
0
votes

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