vueJS 계산 필터 루핑이 너무 많음

vueJS 계산 필터 루핑이 너무 많음

내 데이터에 필터 몇 개를 만들고 있다.

  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>

계산된 속성을 다른 속성에서 사용하지 않도록 하십시오.

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

참조URL: https://stackoverflow.com/questions/65147966/vuejs-computed-filter-looping-too-much