Já vi algumas perguntas sobre observadores de vue.js, mas não encontrei uma pergunta para lidar com meu problema, então aqui está:
No meu SomeComponent.vue eu uso este código:
...
props: ['value']
,
watch: {
value(val) {
console.log(val);
}
},
Na minha página principal, que usa esse componente, eu uso isso, que está funcionando:
<template>
<div>
<SomeComponent
v-model="test"
></SomeComponent>
</div>
</template>
data() {
return {
test: {}
};
},
created() {
this.test = this.DoSomething();
},
Se eu adicionar outra propriedade, o observador não será mais acionado:
<template>
<div>
<SomeComponent
v-model="test"
></SomeComponent>
</div>
</template>
data() {
return {
test: {}
};
},
created() {
this.test.Prop1 = this.DoSomething();
this.test.Prop2 = "Test";
},
EDIT: Depois da resposta do Behappy, minha parte do componente fica assim agora:
...
props: ["value"],
watch: {
value: {
handler(val) {
console.log(val);
},
deep: true
}
},
Conforme mencionado nos documentos :
Devido às limitações do JavaScript, existem tipos de mudanças que o Vue não consegue detectar. No entanto, existem maneiras de contorná-los para preservar a reatividade.
Para Objetos
O Vue não pode detectar adição ou exclusão de propriedade. Como o Vue realiza o processo de conversão getter / setter durante a inicialização da instância, uma propriedade deve estar presente no
dataobjeto para que o Vue o converta e o torne reativo. Por exemplo:
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` is now reactive
vm.b = 2
// `vm.b` is NOT reactive
O Vue não permite adicionar dinamicamente novas propriedades reativas de nível raiz a uma instância já criada. No entanto, é possível adicionar propriedades reativas a um objeto aninhado usando o this.$set(object, propertyName, value)método:
No seu caso, isso seria:
created() {
this.$set(this.test, 'Prop1', this.DoSomething())
this.$set(this.test, 'Prop2', "Test")
},
Ou você também pode atribuir várias propriedades a um objeto existente, por exemplo, usando Object.assign()como:
this.test = Object.assign({}, this.test, { 'Prop1': 1, 'Prop2': 2 })
Este artigo é coletado da Internet.
Se houver alguma infração, entre em [email protected] Delete.
deixe-me dizer algumas palavras