Невозможно установить свойство объекта как реактивное в Vue.js
У меня есть один компонент vue файла с одним свойством «todo-item» с такой структурой
{
id:1,
text:'Buy tickets',
isDone: false,
person:'Boss',
location:'Boryspil',
childTask:null,
},
И я вычислил свойства:
computed:{
hasLocation(){
return this.todoItem.location;
},
hasPerson(){
return this.todoItem.person;
},
hasChildTask(){
return this.todoItem.childTask;
},
hasParentTask(){
return true;
},
}
И я хочу сделать все свойства объекта реактивными, но когда я меняю свойства в методе:
deletePerson(){
this.$set(this.todoItem, 'person', null);
console.info(this.hasPerson);
console.info(this.todoItem.person);
},
todoItem.person по-прежнему не реагирует, this.hasPerson имеет старое значение, а this.todoItemPerson показывает нулевое значение.
Я пытался сделать их реактивными по методу created, но он все еще не реактивен.
Это компонент всего кода js, без шаблона и css для краткости:
<script>
import HoveredChip from "@/components/HoveredChip";
import {mapMutations} from 'vuex';
export default {
name: "TodoItem",
components: {HoveredChip},
props:['todo-item'],
data() {
return{
isActive : true,
}
},
computed:{
hasLocation(){
return this.todoItem.location;
},
hasPerson(){
return this.todoItem.person;
},
hasChildTask(){
return this.todoItem.childTask;
},
hasParentTask(){
return true;
},
people(){
return [
"dad",
"Ann",
"boss",
"prostitute"
]
},
places(){
return []
}
},
methods:{
...mapMutations(['addPersonMutation'],{
}),
moveToPerson(){
},
moveToLocation(){
},
moveToPatentTask(){
},
addLocation(){
},
addPerson(val){
this.addPersonMutation(val);
this.$set(this.todoItem,'person',val);
console.info(this.hasPerson);
console.info(this.todoItem.person);
},
addChildTask(){
},
deletePerson(){
this.$set(this.todoItem, 'person', null);
console.info(this.hasPerson);
console.info(this.todoItem.person);
},
deleteLocation(){
},
deleteChildTask(){
},
editLocation(){
},
savePerson(){
},
editChildTask(){
}
},
created(){
// this.$set(this.todoItem, 'person', 'undefined');
// this.$set(this.todoItem, 'location', '????');
// this.$set(this.todoItem, 'isDone', "....");
}
}
</script>
Да, тот же вопрос, что и у @kasvith, являются ли данные объектом prop или data?
Да, я передаю todo-item как свойство из родительского элемента, и я думаю, что это основная проблема, я должен сделать это реактивным в родительском элементе или заменить весь объект в родительском элементе, пока я обновляю какое-то свойство, в любом случае он должен быть отправлен на сервер и заменен в будущем, поэтому я думаю, что попробую этот способ, и в случае добавления нового элемента списка дел я буду работать с объектом данных.
Ответы 2
Проблема связана с названием вашей собственности. Измените «todo-item» в разделе данных на todoItem.
Это работает
<template>
<div>
<button @click.prevent = "printPerson">Print Person</button>
<br />
<button @click.prevent = "deletePerson">Delete Person</button>
</div>
</template>
<script>
export default {
data: () => ({
todoItem: {
id: 1,
text: 'Buy tickets',
isDone: false,
person: 'Boss',
location: 'Boryspil',
childTask: null,
},
}),
computed: {
hasLocation() {
return this.todoItem.location;
},
hasPerson() {
return this.todoItem.person;
},
hasChildTask() {
return this.todoItem.childTask;
},
hasParentTask() {
return true;
},
},
methods: {
deletePerson() {
this.$set(this.todoItem, 'person', null);
// this.todoItem.person = "null"
console.info(this.hasPerson);
console.info(this.todoItem.person);
},
printPerson() {
console.info(this.hasPerson);
console.info(this.todoItem.person);
}
}
}
</script>
Также работает использование «this.todoItem.person = null».
Если у вас все еще не работает, отредактируйте свой вопрос и добавьте полный код компонента, и мы сможем помочь.
Моя проблема была в реквизитах, я получаю todoItem из родительского элемента и не могу сделать это реактивным, но с глубоким наблюдением все свойства объекта становятся реактивными. Я решил свою проблему, просто добавив свойство watch в свой компонент:
И теперь, когда я меняю свойство person (или любое другое) моего todoItem, также изменяются обновления в вычисляемых свойствах.
watch:{
todoItem:{
deep: true,
handler(){
this.saveTodoAction(this.todoItem);
}
}
},
А это весь код:
import HoveredChip from "@/components/HoveredChip";
import {mapMutations, mapActions} from 'vuex';
export default {
name: "TodoItem",
components: {HoveredChip},
props:['todo-item'],
data() {
return{
isActive : true,
}
},
computed:{
hasLocation(){
return this.todoItem.location;
},
hasPerson(){
return this.todoItem.person;
},
hasChildTask(){
return this.todoItem.childTask;
},
hasParentTask(){
return true;
},
people(){
return [
"Dad",
"Ann",
"Boss",
"Prostitute"
]
},
places(){
return []
}
},
methods:{
...mapMutations(['addPersonMutation'],{
}),
...mapActions(['saveTodoAction']),
moveToPerson(){
},
moveToLocation(){
},
moveToPatentTask(){
},
addLocation(){
},
addPerson(val){
this.addPersonMutation(val);
},
addChildTask(){
},
deletePerson(){
this.todoItem.person = null;
},
deleteLocation(){
},
deleteChildTask(){
},
editLocation(){
},
savePerson(){
},
editChildTask(){
},
},
watch:{
todoItem:{
deep: true,
handler(){
this.saveTodoAction(this.todoItem);
}
}
},
created(){
}
}
вы передаете todo-элементы от родителя?