vuejs数据属性undefined

Question

我遇到了一个问题，即属性在vuejs实例内返回undefined，但在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 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。