Meteor/Vue应用搜索结果无法显示问题求助

我在Meteor+Vue应用里加了个搜索字段，想展示Articles Collection里和输入值匹配的所有文章。searchArticles方法已经调用了，但搜索框下面就是出不来匹配的文章列表。按@Estus的建议把matchingArticles改成响应式后，问题还是没解决，相关代码如下：

<script setup>
import { ref, reactive, computed } from 'vue';
import { ArticlesCollection } from '../../db/ArticlesCollection';
import Article from '../components/Article.vue';
import { subscribe } from 'vue-meteor-tracker';

const articleSearch = ref('');
let matchingArticles = reactive({
  contents: [],
});
const searchArticles = () => {
  this.matchingArticles.contents = ArticlesCollection.find({
    text: articleSearch.value,
  });
};

subscribe('articles');
</script>

<template>
  <form @submit.prevent="searchArticles">
    <input
      v-model="articleSearch"
      class="border border-gray-300 rounded-md py-2 px-4 mr-2 text-gray-600 text-sm focus:outline-none focus:border-gray-400 focus:ring-0"
      type="text"
      placeholder="Type to add new articles"
    />
    <button
      class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
      type="submit"
    >
      Add Article
    </button>
  </form>
  <ul class="list-disc list-inside p-4">
    <Article
      v-for="article of matchingArticles.contents"
      :key="article._id"
      :article="article"
    />
  </ul>
</template>

问题出在哪 #

1. <script setup>语法里不存在this，你写的this.matchingArticles根本访问不到定义的响应式对象，等于白赋值。
2. ArticlesCollection.find()返回的是Meteor的Cursor对象，不是普通数组，Vue没法直接遍历这个对象渲染列表。
3. 当前查询是精确匹配，只有输入文本和text字段完全一致才会有结果，大概率你需要的是模糊搜索，这写法不符合需求。
4. 就算赋值成功，直接把Cursor塞给响应式属性，Vue也追踪不到变化，不会触发重新渲染。

修复后的代码 #

<script setup>
import { ref, computed } from 'vue';
import { ArticlesCollection } from '../../db/ArticlesCollection';
import Article from '../components/Article.vue';
import { subscribe } from 'vue-meteor-tracker';

const articleSearch = ref('');

// 用computed自动跟着搜索词变化，实时返回匹配的文章数组
const matchingArticles = computed(() => {
  // 模糊匹配：忽略大小写，包含搜索词即匹配
  const searchQuery = articleSearch.value 
    ? { text: { $regex: articleSearch.value, $options: 'i' } } 
    : {};
  // 把Cursor转成普通数组，Vue才能正常渲染
  return ArticlesCollection.find(searchQuery).fetch();
});

subscribe('articles');

// 若要保留点击按钮触发的逻辑，直接空函数即可，computed会自动响应搜索词变化
// const searchArticles = () => {};
</script>

<template>
  <form @submit.prevent>
    <input
      v-model="articleSearch"
      class="border border-gray-300 rounded-md py-2 px-4 mr-2 text-gray-600 text-sm focus:outline-none focus:border-gray-400 focus:ring-0"
      type="text"
      placeholder="搜索文章"
    />
    <button
      class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
      type="submit"
    >
      搜索
    </button>
  </form>
  <ul class="list-disc list-inside p-4">
    <Article
      v-for="article of matchingArticles"
      :key="article._id"
      :article="article"
    />
  </ul>
</template>

核心改动说明 #

• 删掉无效的this调用，<script setup>直接访问定义的变量即可。
• 用computed计算属性代替手动赋值，搜索词变化时自动重新查询并返回数组。
• 调用.fetch()把Meteor Cursor转成普通数组，确保Vue能遍历渲染。
• 改成模糊匹配的查询逻辑，更符合常规搜索需求；如果需要精确匹配，把$regex部分改回text: articleSearch.value即可。
• 若不需要点击按钮触发搜索，仅保留v-model="articleSearch"就能实时更新结果，按钮可留可删。

内容的提问来源于stack exchange，提问作者AntonSack