v-for에서 v-if에 대한 VueJS 필터

v-for에서 v-if에 대한 VueJS 필터

다음과 같은 필터가 있습니다.

  computed: {
    ...mapState({
      myNodes: (state) => state.myNodes,
      configPositions: (state) => state.configPositions,
      configEmoji: (state) => state.configEmoji,
    }),

    nodes_filtered: function () {
      return this.myNodes.filter((nodes) => {
        return nodes.deleted == false
      })
    },

    emojis_filtered() {
      return this.configEmoji.filter((emojis) => {
        // console.log(emojis)
        // if emojis.nodeid == myNodes.node_id
        return emojis
      })
    },

}

마이템플릿

    <div v-for="(nodes, index) in nodes_filtered" v-bind:key="index">
      <form class="nodes">
        <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>

        <div class="btn-row">
          <SvgButton
            buttonClass="nodes"
            @click.prevent="deleteFlag(value.node_id)"
          />
          <SvgButton2 buttonClass="nodes" @click.prevent="readFlag()" />
        </div>

        <div class="allemoji">
          <div
            class="eachemoji"
            v-for="(emojis, index) in emojis_filtered"
            :key="index"
          >
            {{ emojis.emoji_text }}
          </div>
        </div>
      </form>
    </div>

이 방법은 작동하지만 필요한 것은 이모티콘을 다른 방식으로 필터링하여 이모티콘이 올바른 텍스트에만 표시되도록 하는 것입니다. 올바른 구문을 알 수 없습니다.if emojis.nodeid == myNodes.node_id그 형태로 표시됩니다.이는 v-for 내에서 v-if를 사용하는 잘못된 관행을 방지하기 위한 것입니다.

나쁜 습관은 사용하는 것입니다.v-if그리고.v-for는 같은 요소이지만 다음 구문을 사용할 수 있습니다.

<div
            class="eachemoji"
            v-for="(emojis, index) in emojis_filtered"
            :key="index"
          >
            <template v-if="emojis.nodeid == nodes.node_id">{{ emojis.emoji_text }}</template>
          </div>

또는 다음과 같이 계산한다.

    emojis_filtered() {
      return this.configEmoji.filter((emojis) => {
        return  this.myNodes.some(node=>emojis.nodeid == node.node_id)
      })
    },

언급URL : https://stackoverflow.com/questions/65110541/vuejs-filter-for-v-for-to-v-if