在我的应用程序中,我有一个用于获取和选择从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()
}
}