vueJS 计算过滤器循环太多

Question

我正在为我的数据构建几个过滤器


  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 &amp; 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>

Answer 1

尽量不要在另一个中使用计算属性 :

    positions_filtered: function () {
      return this.configPositions.filter((positions) => {
        return this.myNodes.find((node) => {
          return !node.deleted &&  positions.node_id == node.node_id
        })
      })
    },

vueJS 计算过滤器循环太多

vueJS computed filter looping too much

javascript

vue.js

vuex

v-for