Vue 3组合API:发出计算到筛选数组

Question

我正在学习Vue 3组合API，我做了一个简单的post列表(只需为每个帖子创建一个带有标记的post数组)，如下所示。然后，我有一个组件PostList来显示这些帖子，还有一个TagCloud来显示所有现有的标记。我试图通过点击标签过滤帖子。

• 我设法从组件TagCloud发出标记。
• 我试着用一个计算的但是.它不能工作

下面这三个元素一起工作，有人能发现出什么问题了吗？

主要观点

<template>
  <div class="home">
    <h1>Today I learned (TIL)</h1>
    <div class="layout">
      <TagCloud :tils="tils" @tag="filterTils" />
      <PostList :tils="filterTils" />
    </div>
  </div>
</template>

<script>
import PostList from "../components/PostList.vue";
import TagCloud from "../components/TagCloud.vue";
import { ref, computed } from "vue";

export default {
  name: "Til",
  components: { PostList, TagCloud },
  setup() {
    const tils = ref([
      {
        title: "Symbol#to_proc conversion",
        description: "map(&:to_i) is exactly the same as map { |x| x.to_i }",
        tags: ["ruby"],
      },
      {
        title: "Symbol#to_proc conversion",
        description:
          "Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum ",
        tags: ["lorem"],
      },
      {
        title: "Symbol#to_proc conversion",
        description: "map(&:to_i) is exactly the same as map { |x| x.to_i }",
        tags: ["ruby"],
      },
    ]);

    const filterTils = computed((tag) => {
      return tils.value.filter((til) => til.tags.includes(tag));
    });
    
    return { tils, filterTils };
  }
};
</script>

标记云组件

<template>
  <div class="tag-cloud">
    <h3>Tags</h3>
    <div v-for="tag in tags" :key="tag">
      <div @click="filterTag(tag)" class="uniq-tag">#{{ tag }}</div>
    </div>
  </div>
</template>

<script>
import useTags from "../composables/useTags";

export default {
  props: ["tils"],
  setup(props, context) {
    const { tags } = useTags(props.tils);
    const filterTag = (tag) => {
      context.emit("tag", tag);
    };
    return { tags, filterTag };
  },
};
</script>

员额清单构成部分

<template>
  <div class="til-list">
    <div v-for="til in tils" :key="til">
      <div class="til">
        <h3>{{ til.title }}</h3>
        <p>{{ til.description }}</p>
        <span v-for="tag in til.tags" :key="tag"> #{{ tag }} </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["tils"],
};
</script>

Answer 1

您尝试将filterTils用作tag事件的事件处理程序，以及返回筛选结果的计算支柱，但这两件事应该是分开的。

还请注意，用computed()包装方法不一定返回另一个方法。对于filterTils，它返回一个Array。

解决方案

这里有一个解决问题的方法：

1. 添加一个包含当前选定标记的ref： 从“vue”导出默认的{ const currentTag = ref() }导入{ ref }
2. 更改@tag事件处理程序以复制当前标记： 演示