CODEWITHSUNDEEP
vue.js
Nusendra Hanggarawan
Nusendra Hanggarawan

Reputation: 51

Pass Props component to root Instance

I'm super newbie in vuejs. I don't know how to pass props component to root instance Here is my code.

component (Tesvue.vue)

<template>
  <label class="col-md-2 control-label">{{name}}</label>
</template>

<script>
export default {
  props: ['name']
}
</script>

Root (app.js)

window.Vue = require('vue');
import tesvue from './components/Tesvue.vue';

var vm = new Vue({
    el: '#app',
    components: {
      tesvue
    },
    data:{
      getname: ''
    }
});

blade file 

<div class="" id="app">
  <tesvue name="{{$model->name}}"></tesvue>
</div>

The scenario is, im fetching data from laravel controller to blade element, then vue js can access it. This is like pass php variable to vuejs. I know this can be done with Php-vars-to-javascript plugin, or i can simply use it inline. like this var name = {{name}}

but i want do that in vuejs way (props).

So how to pass props data to root instance. How 'getname' can get props 'name' Thanks, sorry my bad english.

Upvotes: 4

Views: 7659

Answers (5)

Paul M
Paul M

Reputation: 451

As others have mentioned, this is not possible, but I was able to pass data to a vue root component by using the local storage. In my HTML file I added localStorage.setItem('domain', 'google.com'), then within my vuejs components on mounted(), this.domain = localStorage.getItem('domain'). I was then able to use the data from root. Not the prettiest but works.

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

Here's nice solution using dataset:

HTML:

<div id="app" data-name="dataname">

Component (Testvue.vue):

<template>
  <label class="col-md-2 control-label">{{name}}</label>
</template>

Root Instance (App.js)

const root_element = document.getElementById('app');

new Vue({
    el: root_element,
    propsData: { name: root_element.dataset.name }
});

See more about propsData in the docs.

If you want to use multiple dataset at once, you can assign an object using spread operator like this: (if you're using Babel and have the object-rest-spread plugin)

const root_element = document.getElementById('app');

new Vue({
    el: root_element,
    propsData: { ...root_element.dataset }
});

Or, simply use ES6 method if you have not used Babel: (Object.assign())

propsData: Object.assign({},root_element.dataset)

So, if you have defined multiple dataset in your html like this:

<div id="app" 
data-name="dataname" 
data-another="anotherdata" 
data-anything-else="anydata">

You can expose props like this:

export default {
  // ...
  props: ['name', 'another', 'anythingElse'],
  // ...
};

Upvotes: 2

Roland
Roland

Reputation: 27819

There are some ways to pass data from child to the parent.The best and acceptable are using Vuex Store and emit an event.

If you want to emit an event from child you can call a method to do that:

callThisMethod () {
  this.$emit('nameOfEventYouWantToListen', dataToPass)
}

Then you can listen to this event in parent component in which you have import the component 

<ImportedComponent @nameOfEventYouWantToListen="callFunctionInParentHere" />

Alternatively if you want to use Vuex then go and create a property in state of store,also a getter to get that property from state and a mutation to change the value of property located in state.

Then in parent component use a getter to get the property in state and in child component commit a mutation (would be great if you include actions in whole proccess tho) to change the property in state.

Upvotes: 0

Nusendra Hanggarawan
Nusendra Hanggarawan

Reputation: 51

I found the solution

<template>
  <label class="col-md-2 control-label">{{name}}</label>
</template>

<script>
export default {
  props: ['name'],
  mounted: function() {
    this.$root.getname = this.name;
  }
}
</script>

check this out https://jsfiddle.net/mtL99x5t/

but many thanks for @Reduxxx for answer my newbie question.

Upvotes: 0

Reduxx
Reduxx

Reputation: 604

A component can not directly pass data back to its parent. This is only possible via events. So for this to work you'd have to emit an event from the child component as soon as its ready and have to listen for that event. In your case its like this:

Component (Tesvue.vue)

<template>
    <label class="col-md-2 control-label">{{name}}</label>
</template>

<script>
export default {
    props: ['name'],
    mounted() {
        this.$emit('setname', this.name);
    }
}
</script>

Root (app.js)

window.Vue = require('vue');
import tesvue from './components/Tesvue.vue';

var vm = new Vue({
    el: '#app',
    components: {
        tesvue
    },
    data: {
        getname: ''
    }
    methods: {
        changeName(name) {
            this.getname = name;
        }
    }
});

blade file

<div class="" id="app">
    <tesvue name="{{$model->name}}" @setname="changeName"></tesvue>

    <!-- getname got set through changeName event -->
    <span v-text="getname"></span>
</div>

Upvotes: 2

Related Questions