vuejs 数据属性未定义

Question

我遇到了问题，其中属性在 vuejs 实例中返回未定义，但 returns HTML 中的正确值。

data: {
    ...
    userFilter: 'all',
    ...
},

警报返回 this.userFilter 未定义

filters: {
    all: function(tasks) {
        alert(this.userFilter); // This is undefined
        if(this.userFilter == 'all'){
            return tasks;
        }else{
            return tasks.filter(function(task){
                return task.user_id == this.userFilter;
            });
        }
    },
}

下拉到 select 用户过滤

<select class="form-control" v-if="visibility == 'all'" v-model="userFilter">
    <option selected value="all">Showing all users tasks</option>
    <option v-for="user in users"
        value="@{{user.id}}">
        @{{user.first_name}} @{{user.last_name}}
    </option>
</select>

下面正确显示了 userFilter 的值

@{{ userFilter }}

完整代码：

var tasks = new Vue({
    el: '#tasks',

    data: {
        tasks: [],
        users: [],
        newTask: { description: '', due_at: '', user_id: '', completed: false },
        editingTask: false,
        showAlert: false,
        loading: true,
        visibility: 'active',
        validation: [],
        showUser: null,
        authUser: {}
    },

    ready: function() {
        this.getAuthUser();
        this.getTasks();
        this.getUsers();
    },

    computed: {
        filteredTasks: function () {
            return this.$options.filters[this.visibility](this.tasks);
        },
        remaining: function() {
            return this.tasks.filter(function(task){
                return !task.completed && task.user_id == this.authUser.id;
            }).length;
        }
    },

    filters: {
        all: function(tasks) {
            return tasks;
        },
        active: function(tasks) {
            return tasks.filter(function(task){
                return !task.completed;
            });
        },
        completed: function(tasks) {
            return tasks.filter(function(task){
                return task.completed;
            });
        },
        groupByDate: function(tasks) {
            var result = {};
            for (var i = 0; i < tasks.length; i++) {
                var task = tasks[i];

                // Convert due_at date to be used as array key
                var due_at = moment(task.due_at,'YYYY-MM-DD').format('DD-MM-YYYY');

                if (result[due_at]) {
                    result[due_at].push(task);
                } else {
                    result[due_at] = [task];
                }
            }
            return result;
        },
        newDate: function(date) {
            return moment(date, 'DD-MM-YYYY').format('LL');
        },
        usersFilter: function(tasks, user_id) {
            if(this.visibility == 'all' && user_id){
                return tasks.filter(function(task){
                    return task.user_id == user_id;
                });
            }else{
                return tasks;
            }
        }
    },

    methods: {
        getTasks: function () {
            this.loading = true;
            this.$http.get('api/tasks/'+ this.visibility).success(function(tasks) {
                this.$set('tasks', tasks);
                this.loading = false;
            }).error(function(error) {
                console.log(error);
            });
        },
        getUsers: function() {
            this.$http.get('api/users/all',function(users){
                this.$set('users',users);
            });
        },
        getAuthUser: function() {
            this.$http.get('api/users/current-user').success(function(authUser) {
                this.$set('authUser',authUser);
            });
        },
        toggleVisibility: function(filter) {  
            this.visibility = filter;
            this.getTasks();
        },
        open: function(e) {  
            e.preventDefault();
            $('#add-task-modal').slideDown();
        },
        close: function(e) {  
            e.preventDefault();
            $('#add-task-modal').slideUp();
        },
        toggleAlert: function(message) {  
            this.showAlert = true;  
            $('.alert').text(message);
            $('.alert').fadeIn().delay(1000).fadeOut();
            this.showAlert = false; 
        },
        addTask: function(e) {
            e.preventDefault();

            if ( ! this.newTask) return;

            var task = this.newTask;

            this.$http.post('api/tasks', task)
                .success(function(data){
                    task.id = data.task_id;
                    task.due_at = moment(task.due_at,'DD-MM-YYYY').format('YYYY-MM-DD');

                    if(this.visibility == 'all'){
                        this.tasks.push(task);
                    }else if(this.authUser.id == task.user_id){
                        this.tasks.push(task);
                    }

                    $('.datepicker').datepicker('clearDates');

                    this.validation = [];
                    this.newTask = { description: '', due_at: '', user_id: '', completed: '' };

                    this.$options.methods.toggleAlert('Task was added.');
                })
                .error(function(validation){
                    this.$set('validation', validation);
                });
        },
        toggleTaskCompletion: function(task) {
            task.completed = ! task.completed;
            this.$http.post('api/tasks/complete-task/'+ task.id, task);
        },
        editTask: function(task) {
            if(task.completed) return;
            this.editingTask = task;
        },
        cancelEdit: function (todo) {
            this.editingTask = false;
        },
        updateTask: function(task) {
            task.description = task.description.trim();
            this.$http.patch('api/tasks/'+ task.id, task);
            this.$options.methods.toggleAlert('Task was updated.');
            return this.editingTask = false;
        },
        deleteTask: function(due_at,task) {
            if(confirm('Are you sure you want to remove this task?')){
                this.tasks.$remove(task);
                this.$http.delete('api/tasks/'+ task.id, task);
                this.$options.methods.toggleAlert('Task was removed.');
            }
        }
    },

    directives: {
        'task-focus': function (value) {
            if (!value) {
                return;
            }
            var el = this.el;
            Vue.nextTick(function () {
                el.focus();
            });
        }
    }
})

Answer 1

尝试使用tasks.$data.visibility.

vuejs 数据属性未定义

vuejs Data property undefined

javascript

vue.js

vuejs 数据 属性 未定义

vuejs Data property undefined

javascript

vue.js

vuejs 数据属性未定义