VUE:观看组件“ prop”不起作用

时间:2018-08-21 09:13:31

标签: vuejs2 vue-component

在我的应用程序中,我有一个用于获取和选择从API接收的任务的模式。该组件在“ props”中具有“ projectObject”属性(不是data或计算属性)。这个想法是您从另一个列表中选择一个项目,并且该项目对象一直传递到模态组件的projectObject,并且工作正常。选择新项目时,道具的确会发生变化,但观看功能根本不会触发。我也尝试过“深”。手表为何无法检测到道具发生了变化?可以观赏道具吗?

以下是组件中脚本标签内的内容:

export default {
  name: 'task-select-modal',
  props: {
  isActive: false,
  projectObject: {} 
  },
  data () {
    return {
      showModal: false,
      tasks: [],
      selectedTask: [],
      filterString: ''
    }
  },
  methods: {
    getTasks: function () {
      this.tasks = Object.assign({}, this.tasks, {})
      this.selectedTask = {}

      this.$store.dispatch( 'active-collab/getTasks', this.projectObject ).then( response => {
        if ( response ) {
          this.tasks = Object.assign({}, this.tasks, response )

          Object.keys( this.tasks ).forEach( key => {
            let t = {
              projectObject: this.projectObject,
              task: this.tasks[ key ].task_id
            }
            this.$store.dispatch( 'active-collab/getTaskInfo', t ).then( info => {
              let task = this.tasks[ key ]
              task.info = info
              this.$set( this.tasks, key, task )
            })
          })
        }
      })
    },
    selectTask: function ( key ) {
      this.selectedTask = this.tasks[ key ]
    },
    filterTasksList: function () {
      if ( this.filterString != '' ) {
        let matches = {}
        Object.keys( this.tasks ).forEach(( key ) => {
          if ( this.tasks[ key ].name.toLowerCase().includes( this.filterString.toLowerCase())) {
            matches[ key ] = this.tasks[ key ]
          }
        })
        return matches
      } else {
        return this.tasks
      }
    },
    confirmTask: function () {

    },
    toggle: function () {
      this.$emit( 'toggle' )
    }
  },
  computed: {
    filteredTasksList: function () {
      return this.filterTasksList()
    }
  },
  watch: {
    projectObject: function ( val ) {
      console.log( 'this should reset it' )
      this.getTasks()
    }
  },
  mounted () {
    //this.getTasks()
  }
}

0 个答案:

没有答案