Javascript vueJS计算的筛选器循环过多
我正在为我的数据构建几个过滤器Javascript vueJS计算的筛选器循环过多,javascript,vue.js,vuex,v-for,Javascript,Vue.js,Vuex,V For,我正在为我的数据构建几个过滤器 computed: { ...mapState({ myNodes: (state) => state.myNodes, configPositions: (state) => state.configPositions, }), nodes_filtered: function () { return this.myNodes.filter((nodes) => {
computed: {
...mapState({
myNodes: (state) => state.myNodes,
configPositions: (state) => state.configPositions,
}),
nodes_filtered: function () {
return this.myNodes.filter((nodes) => {
return nodes.deleted == false
})
},
positions_filtered: function () {
return this.configPositions.filter((positions) => {
return this.nodes_filtered.some((node) => {
positions.node_id == node.node_id
})
})
},
},
// this is to stop sync chasing bug
myArray: null,
// NOTE: ok as created here but NOT if this is the first view to load
created() {
//access the custom option using $options
this.$options.myArray = this.nodes_filtered
},
然而,当我加载数据时,它会大量复制数据!(导致浏览器崩溃)
我认为位置过滤器的内容循环太多了。
如果我喜欢console.log
positions_filtered: function () {
return this.configPositions.filter((positions) => {
console.log(positions.node_id)
return this.nodes_filtered.some((node) => {
console.log(positions.node_id)
positions.node_id == node.node_id
})
})
},
两次显示第一个控制台日志
第二个是3x7!
这是一个很小的数据集,但如果我添加更多,它显然会变得更糟
我只能认为我的循环是错误的…非常感谢任何帮助
这是我的模板,可能也有问题
<div v-for="(value, index) in positions_filtered" v-bind:key="index">
<div v-for="(nodes, index) in $options.myArray" v-bind:key="index">
<draggable
class="innernode"
:w="value.width"
:h="value.height"
:x="value.x_pos"
:y="value.y_pos"
:z="value.z_index"
:scale="scale"
@activated="onActivated(nodes.node_id)"
@dragging="onDrag"
@resizing="onResize"
@dragstop="onDragstop"
@resizestop="onResizestop"
:drag-cancel="'.drag-cancel'"
style="border: 2px dashed black; background-color: rgb(155, 194, 216)"
:min-width="200"
:min-height="220"
>
<form class="nodes">
<template v-if="nodes.read_mode == false">
<textarea
@focus="editTrue(true)"
@blur="editTrue(false)"
autofocus
v-model="nodes.node_text"
@input="editNode"
:id="nodes.node_id"
placeholder="Type your thoughts and ideas here! (auto saved every keystroke)"
></textarea>
<p class="info">*markdown supported & autosaves</p>
</template>
<div class="btn-row">
<SvgButton
buttonClass="nodes"
@click.prevent="deleteFlag(nodes.node_id)"
/>
<SvgButton2
buttonClass="nodes"
@click.prevent="readFlag(nodes.node_id, nodes.read_mode)"
/>
</div>
<div class="allemoji">
<div
class="eachemoji"
v-for="(emojis, index) in configEmoji"
:key="index"
>
<template v-if="emojis.node_id == nodes.node_id">{{
emojis.emoji_text
}}</template>
</div>
</div>
</form>
</draggable>
</div>
</div>
*支持降价&;自动储蓄
{{
emojis.emoji_文本
}}
尽量不要在另一个属性中使用计算属性:
positions_filtered: function () {
return this.configPositions.filter((positions) => {
return this.myNodes.find((node) => {
return !node.deleted && positions.node_id == node.node_id
})
})
},
仅供参考,这里是整个混乱:)