組件中的Vue JS數據可用性

我剛剛在laravel應用程序中盯着vueJS玩。組件中的Vue JS數據可用性

我想創建一個步驟嚮導，我無法從其中一個組件內的vue定義中訪問數據。

我：

new Vue({ 
    el: '#app', 

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

而且我希望能夠訪問chosenName內 Vue.component('step-controls', {

使

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

將被禁用如果chosenName值empty string

我會想到，它應該是這樣的：

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

但chosenName不是props之一。如果我將它添加到props陣列中，我如何保持同步？

鏈接撥弄：https://jsfiddle.net/angelin8r/oxse2p3v/3/

來源

2017-03-01 Angelin Calu

使用您的提琴更新數據，進行了如下修改

<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'],

通過將chosenName綁定到父屬性，它將在父屬性更新時自動更新。

來源

2017-03-01 16:46:53 Bert

正是我想要的。奇蹟般有效！我現在想知道如何將數據更改爲函數會影響我的代碼？ https://jsfiddle.net/angelin8r/oxse2p3v/ –

@AngelinCalu創建一個新的Vue時，你不需要使用一個函數。在創建組件時（如使用Vue.component），您需要使用一個函數。造成這種差異的原因是因爲當您使用某個組件時，通常需要隔離該組件，因爲您可能會多次使用該組件。 – Bert

你的第一個問題是，您的Vue元素的數據屬性必須是一個函數。該函數將返回一個包含currentStep和currentName的對象。 See the docs for reference

所以，你的組件看起來像

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

然後，您可以訪問和使用this.currentStep或this.chosenName

來源

2017-03-01 15:37:30

我試過你的建議。仍然無法通過'console.log（this.chosenName）;'在組件內部訪問'chosenName'。你可以在小提琴中添加解決方案嗎？ –

組件中的Vue JS數據可用性

回答

相關問題