Question

我只是盯着在laravel应用程序中玩vueJS。

我正在尝试创建一个步骤向导，但我无法从其中一个组件中的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/

Answer 1

使用您的小提琴，进行了以下更改

<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元素的data属性需要是一个函数。该函数将返回一个包含currentStep和currentName的对象。 See the docs for reference

因此，您的组件看起来像

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

然后，您可以使用this.currentStep或this.chosenName

访问和更新数据

Vue JS组件之间的数据可用性

2 个答案: