Question

我正在尝试使用Vue创建一个多步骤表单，我想为每个步骤创建一个组件，让我们说：

StepOne.vue StepTwo.vue StepThree.vue

在我的app.js中，我有一个事件监听器和一个名为step的变量。

const app = new Vue({
    el: '#app',
    data: function() {
        return data = {
            step : 1
        }
    },
    mounted() {
        console.log('Component mounted.' + this.step)
    },
    created() {
        Event.$on('start', function(par){
            console.log('got it' + this.step);
        })
    }
});

当我的StepOne组件中的事件发生时，控制台记录：未定义。

在我的刀片视图中，我想做这样的事情：

<div id="app">
    If step == 1 show StepOne
    If step == 2 show StepTwo
    if step == 3 show StepThree
</div>

这是正确的方法吗？

Answer 1

使用window.events来监听事件，并确保您更改下面的数据返回！

new Vue({
    el: '#app',
    components: {
        Dashboard,
    },
    data: function() {
        return  {
            step : 1
        }
    },
    mounted() {
        console.log('Component mounted.' + this.step)
    },
    created() {
        window.events.$on('start', function(par){
            console.log('got it' + this.step);
        });
    }
});

Answer 2

事实证明，在一个事件中的this.step正在调用＆＃34;错误＆＃34;数据源，因为有一个窗口.Event = new Vue（）;这实际上是从那里调用数据（我相信）

将此更改为app.step工作。

window.Event = new Vue();

const app = new Vue({
    el: '#app',
    data: function() {
        return {
            step : 1
        }
    },
    mounted() {
        console.log('Component mounted.' + this.step)
    },
    created() {
        Event.$on('start', function(par){
            console.log('got it ' + app.step);
        })
    }
});

感谢大家的帮助！

从事件监听器（Laravel）访问Vue数据

2 个答案: