- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
在我的 Vuex 商店中,我通过 Firebase/Firestore API 调用获得了一组房间,如下所示:[{label:'Kitchen', description:'...'}, ...]
,我通过 Vuex getter 函数将其提供给我的应用程序。自然地,在我的组件中,我然后将这个数组作为计算属性接收。但是在我的 CRUD 组件中,我实际上通过另一个计算属性路由这个“原始”数组,以便我可以将几个临时属性附加到数组中的每个对象 - workable: () => this.rooms.map(val => { return ...val, editing: false, loading:false, ... })
.这些附加属性是 CRUD 组件专门需要的,因此保留在原始数组、数据源或应用程序中的其他任何地方都没有意义。
我现在遇到的问题是我显然需要能够更新 CRUD 数组中的这些临时属性,但我不能,因为(AFAIU)我的计算属性需要 setter 来更新原始数组在 vuex 商店中,在我的例子中,它必须更新数据源,以完成循环。 (请注意,我并不完全理解我在本段中所说的大部分内容,因此请随时纠正任何错误的假设。)
所以我的问题是如何在不将这些更改(和属性)传播回数据源的情况下更新数组对象中的临时属性?
这是我的代码的简化版本,可帮助您直观地了解当前的工作方式:
// store.js (Vuex)
const actions = {
load: ({ commit, getters }) => {
const query = firebase.roomCollection.where('user', '==', getters.user.id);
const unsub = query.onSnapshot(snap => {
const rooms = snap.docs.map(val => {
return {
id: val.id,
...val.data(),
timestamp: val.data().timestamp.toDate(),
};
});
commit('setRooms', rooms);
});
},
};
const mutations = {
setRooms: (state, payload) => state.rooms = payload,
};
const state = {
rooms: [],
};
const getters = {
rooms: state => state.rooms,
};
// RoomCrud.vue
<template>
<ul>
<li v-for="room in workable" :key="`room-${i}`">
{{ room.label }}
<button @click="room.editing = !room.editing">Edit</button>
<br />
room: {{ room }} <!-- room.editing doesn't change when the Edit button gets clicked -->
</li>
</ul>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
computed: {
...mapGetters(['rooms']),
workable() {
return this.rooms.map(val => {
return {
...val,
editing: false,
loading: false
};
});
}
}
}
</script>
我试过使 workable
成为(最初为 null)数据属性,然后使用方法 (setWorkable()
) 将附加属性添加到每个数组,然后在 mounted()
上调用 setWorkable()
,它成功地将 workable
从 rooms
中分离出来,但是这种方法的问题是当我对数组中我确实想要一直传播回来源。
我意识到这可能是完成我想做的事情的唯一方法,但我希望有更好的方法只使用计算属性,这样我就不必每次都手动重新渲染做出改变。
如果我需要包含任何其他信息,请告诉我。
最佳答案
我建议通过添加一个操作 edit
来更改将整个逻辑放入商店的方法,当您通过传递房间 index
单击该按钮时将触发该操作> 并更改行状态:
// store.js (Vuex)
const actions = {
edit:({commit,state},index)=>{
commit('editRoom', index);
},
load: ({ commit, getters }) => {
const query = firebase.roomCollection.where('user', '==', getters.user.id);
const unsub = query.onSnapshot(snap => {
const rooms = snap.docs.map(val => {
return {
id: val.id,
...val.data(),
editing: false,
loading: false,
timestamp: val.data().timestamp.toDate(),
};
});
commit('setRooms', rooms);
});
},
};
const mutations = {
setRooms: (state, payload) => state.rooms = payload,
editRoom:(state,index)=> {
state.rooms[index].editing=!state.rooms[index].editing;
Vue.set(state.rooms,index,state.rooms);
}
};
const state = {
rooms: [],
};
const getters = {
rooms: state => state.rooms,
};
RoomCrud.vue
<template>
<ul>
<li v-for="(room,i) in rooms" :key="`room-${i}`">
{{ room.label }}
<button @click="edit({index:i})">Edit</button>
<br />
room: {{ room }}
</li>
</ul>
</template>
<script>
import { mapGetters,mapActions } from 'vuex';
export default {
methods:{
...mapActions(["edit"]),
} ,
computed: {
...mapGetters(['rooms']),
}
}
</script>
关于javascript - 编辑从计算属性返回的数组中的对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57741241/
你能比较一下属性吗 我想禁用文本框“txtName”。有两种方式 使用javascript,txtName.disabled = true 使用 ASP.NET, 哪种方法更好,为什么? 最佳答案 我
Count 属性 返回一个集合或 Dictionary 对象包含的项目数。只读。 object.Count object 可以是“应用于”列表中列出的任何集合或对
CompareMode 属性 设置并返回在 Dictionary 对象中比较字符串关键字的比较模式。 object.CompareMode[ = compare] 参数
Column 属性 只读属性,返回 TextStream 文件中当前字符位置的列号。 object.Column object 通常是 TextStream 对象的名称。
AvailableSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。 object.AvailableSpace object 应为 Drive 
Attributes 属性 设置或返回文件或文件夹的属性。可读写或只读(与属性有关)。 object.Attributes [= newattributes] 参数 object
AtEndOfStream 属性 如果文件指针位于 TextStream 文件末,则返回 True;否则如果不为只读则返回 False。 object.A
AtEndOfLine 属性 TextStream 文件中,如果文件指针指向行末标记,就返回 True;否则如果不是只读则返回 False。 object.AtEn
RootFolder 属性 返回一个 Folder 对象,表示指定驱动器的根文件夹。只读。 object.RootFolder object 应为 Dr
Path 属性 返回指定文件、文件夹或驱动器的路径。 object.Path object 应为 File、Folder 或 Drive 对象的名称。 说明 对于驱动器,路径不包含根目录。
ParentFolder 属性 返回指定文件或文件夹的父文件夹。只读。 object.ParentFolder object 应为 File 或 Folder 对象的名称。 说明 以下代码
Name 属性 设置或返回指定的文件或文件夹的名称。可读写。 object.Name [= newname] 参数 object 必选项。应为 File 或&
Line 属性 只读属性,返回 TextStream 文件中的当前行号。 object.Line object 通常是 TextStream 对象的名称。 说明 文件刚
Key 属性 在 Dictionary 对象中设置 key。 object.Key(key) = newkey 参数 object 必选项。通常是 Dictionary 
Item 属性 设置或返回 Dictionary 对象中指定的 key 对应的 item,或返回集合中基于指定的 key 的&
IsRootFolder 属性 如果指定的文件夹是根文件夹,返回 True;否则返回 False。 object.IsRootFolder object 应为&n
IsReady 属性 如果指定的驱动器就绪,返回 True;否则返回 False。 object.IsReady object 应为 Drive&nbs
FreeSpace 属性 返回指定的驱动器或网络共享对于用户的可用空间大小。只读。 object.FreeSpace object 应为 Drive 对象的名称。
FileSystem 属性 返回指定的驱动器使用的文件系统的类型。 object.FileSystem object 应为 Drive 对象的名称。 说明 可
Files 属性 返回由指定文件夹中所有 File 对象(包括隐藏文件和系统文件)组成的 Files 集合。 object.Files object&n
我是一名优秀的程序员,十分优秀!