v-for 到 v-if 的 VueJS 过滤器

Question

我有以下过滤器


  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 的不良做法。

Answer 1

不好的做法是在同一元素中使用 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)
      })
    },

v-for 到 v-if 的 VueJS 过滤器

VueJS filter for v-for to v-if

javascript

vue.js

vuex

v-for