Can'；t在Vue.js中将对象属性设置为被动
我有一个文件vue组件，其中一个属性“todo item”具有这样的结构Can'；t在Vue.js中将对象属性设置为被动,vue.js,reactive,Vue.js,Reactive,我有一个文件vue组件，其中一个属性“todo item”具有这样的结构 { id:1, text:'Buy tickets', isDone: false, person:'Boss', location:'Boryspil', childTask:null, }, 我已经计算了属性： computed:{ hasLocation(){ return this.todoItem.location; }, hasPerson(){
{
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.log(this.hasPerson);
console.log(this.todoItem.person);
},
创建的方法上做出反应，但仍然没有反应
这是由组件组成的完整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.log(this.hasPerson);
console.log(this.todoItem.person);
},
addChildTask(){
},
deletePerson(){
this.$set(this.todoItem, 'person', null);
console.log(this.hasPerson);
console.log(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>
从“@/components/HoveredChip”导入HoveredChip；
从“vuex”导入{mapstations}；
导出默认值{
名称：“TodoItem”，
组件：{HoveredChip}，
道具：['todo-item']，
数据（）{
返回{
是的，
}
},
计算：{
hasLocation（）{
返回this.todoItem.location；
},
哈斯佩森（）{
返回this.todoItem.person；
},
hasChildTask（）{
返回this.todoItem.childTask；
},
hasParentTask（）{
返回true；
},
人（）{
返回[
“爸爸”，
“安”，
“老板”，
“妓女”
]
},
地点（）{
返回[]
}
},
方法：{
…映射突变（['addPersonMutation']{
}),
moveToPerson（）{
},
移动位置（）{
},
moveToPatentTask（）{
},
addLocation（）{
},
addPerson（val）{
这个.addPersonMutation（val）；
此.$set（此.todoItem，'person'，val）；
console.log（this.hassperson）；
console.log（this.todoItem.person）；
},
addChildTask（）{
},
删除人（）{
this.$set（this.todoItem，'person'，null）；
console.log（this.hassperson）；
console.log（this.todoItem.person）；
},
deleteLocation（）{
},
deleteChildTask（）{
},
编辑位置（）{
},
储蓄人（）{
},
editChildTask（）{
}
},
创建（）{
//this.$set（this.todoItem，'person'，'undefined'）；
//this.$set（this.todoItem，'location'，'？？'）；
//this.$set（this.todoItem，'isDone'，“…”；
}
}
问题在于您的物业名称。将数据部分中的“todo项”更改为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.log(this.hasPerson);
console.log(this.todoItem.person);
},
printPerson() {
console.log(this.hasPerson);
console.log(this.todoItem.person);
}
}
}
</script>
印刷人
删除人
导出默认值{
数据：（）=>({
待办事项：{
id:1，
短信：“买票”，
伊斯通：错，
人:"老板",，
地点：'Boryspil'，
childTask:null，
},
}),
计算：{
hasLocation（）{
返回this.todoItem.location；
},
哈斯佩森（）{
返回this.todoItem.person；
},
hasChildTask（）{
返回this.todoItem.childTask；
},
hasParentTask（）{
返回true；
},
},
方法：{
删除人（）{
this.$set（this.todoItem，'person'，null）；
//this.todoItem.person=“null”
console.log（this.hassperson）；
console.log（this.todoItem.person）；
},
印刷人（）{
console.log（this.hassperson）；
console.log（this.todoItem.person）；
}
}
}
此外，使用“this.todoItem.person=null”也可以
如果仍然不适用于您，请编辑您的问题并添加完整的组件代码，我们可以提供帮助。问题在于您的属性名称。将数据部分中的“todo项”更改为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.log(this.hasPerson);
console.log(this.todoItem.person);
},
printPerson() {
console.log(this.hasPerson);
console.log(this.todoItem.person);
}
}
}
</script>
印刷人
删除人
导出默认值{
数据：（）=>({
待办事项：{
id:1，
短信：“买票”，
伊斯通：错，
人:"老板",，
地点：'Boryspil'，
childTask:null，
},
}),
计算：{
hasLocation（）{
返回this.todoItem.location；
},
哈斯佩森（）{
返回this.todoItem.person；
},
hasChildTask（）{
返回this.todoItem.childTask；
},
hasParentTask（）{
返回true；
},
},
方法：{
删除人（）{
this.$set（this.todoItem，'person'，null）；
//this.todoItem.person=“null”
console.log（this.hassperson）；
console.log（this.todoItem.person）；
},
印刷人（）{
console.log（this.hassperson）；
console.log（this.todoItem.person）；
}
}
}
此外，使用“this.todoItem.person=null”也可以
如果仍然不适用于您，请编辑您的问题并添加完整的组件代码，我们可以提供帮助。我的问题在于道具，我从父元素开始执行项目，我不能被动执行，但通过深度监视，所有对象属性都变为被动。
只需将watch属性添加到组件中，我就解决了问题：
现在，当我更改todoItem的person（或任何其他）属性时，也会更改计算属性中的更新
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(){
}
}
我的问题出在