Question

我在我的主要组件中使用它：

<contacts :corporation="corporation"></contacts>

通讯录组件：

export default {

    props: {
        corporation: {
            default: () => []
        }
    },

    data () {
        return {
            contacts: []
        }
    },

    created() {
        this.fetchContacts();
    },

    methods: {
        fetchContacts() {
            console.log(this.corporation.slug); // undefined!
            CorporationService.users(this.corporation.slug)
                .then(({data}) => {
                    this.contacts = data.contacts;
                });
        }
    }
}

我尝试在联系人组件中提取联系人。问题是，如果方法console.log(this.corporation.slug);中的fetchContacts(); corporation.slug未定义！

但是当我调查vue devtools时，公司道具正确设置好了！

可能发生什么事？已经尝试改变：

created() {
  this.fetchContacts();
}

到

mounted() {
      this.fetchContacts();
    }

但那不起作用。

Answer 1

您可以使用watch吗？

像这样。

watch: {
   'corporation.slug': function(slug) {
       if(slug){
          this.fetchContacts();
       }
    } 
}

现在，如果父组件更改corporation.slug，您的子组件将自动获取联系人。

Answer 2

您的道具默认值是值还是函数。但是，如果它是一个函数，它有必要返回一些东西：

props: {
    corporation: {
        default () {
            return []
        }
    }
},

Vue.js属性未定义？

2 个答案: