コンポーネント間のVue JSデータの可用性

Question

laravelアプリケーションの中でvueJSを使って遊んだことがあります。

ステップウィザードを作成しようとしていますが、いずれかのコンポーネント内のvue定義からデータにアクセスできません。

私が持っている：

new Vue({ 
    el: '#app', 

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

をそしてchosenNameの値がempty stringある場合

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

が無効になるように、私はchosenName

Vue.component('step-controls', { 内にアクセスできるようにしたいと思います

私はそれのようなものでなければならないこと想像したでしょう：

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

が、chosenNamepropsの一つではありません。 propsアレイに追加する場合はどうすれば同期できますか？

リンクいじるしますhttps://jsfiddle.net/angelin8r/oxse2p3v/3/

Answer 1

this.chosenNameがあなたのフィドルを使用してデータを更新することができ、次は

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

を変更作ら

および

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

chosenNameを親プロパティにバインドすると、親プロパティが更新されると自動的に更新されます。

Answer 2

あなたの最初の問題は、あなたのVueエレメントのデータプロパティが機能する必要があるということです。この関数はcurrentStepとcurrentNameを持つオブジェクトを返します。 See the docs for reference

だから、あなたのコンポーネントは、次に

new Vue({ 
    el: '#app', 
    data() { 
    return { 
     currentStep : 1, 
     chosenName: "", 
    }; 
    }, 
}) 

ようになり、あなたがアクセスしthis.currentStepまたは