Angelin Calu Angelin Calu -4 years ago 133
Javascript Question

Vue JS data availability among components

I've just stared playing with vueJS inside a laravel app.

I am trying to create a steps wizard and I'm having trouble accessing data from the vue definition inside one of the components.

I have:

new Vue({
el: '#app',

data: {
currentstep : 1,
...
chosenName: "",


And I would like to be able to access
chosenName
inside
Vue.component('step-controls', {


so that

<button class="btn btn-primary" v-on:click="nextStep()" :disabled="secondstep" v-if="firststep != true && laststep != true">Next</button>


Would be disabled if the value of
chosenName
is
empty string


I would have imagined that it should be something like :

secondstep: function() {
return (this.currentstep == 2 && this.chosenName =='')
},


but
chosenName
is not one of the
props
. If I am adding it to the
props
array, how do I keep it in sync?

Link to fiddle: https://jsfiddle.net/angelin8r/oxse2p3v/3/

Answer Source

Using your fiddle, made the following changes

<step-controls
    v-for="step in steps"
    :step="step"
    :stepcount="steps.length"
    :currentstep="currentstep"
    @step-change="stepChanged"
    :chosen-name="chosenName">
</step-controls>

and

props: ['step', 'stepcount', 'currentstep','chosenName'],

By binding chosenName to the parent property, it will automatically update when the parent's property updates.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download