javascript - this.$refs 使用 Vue 3 选项 API 为空

Question

在 Vue 2 中，我曾经能够访问子组件的属性(使用 this.$refs 和动态分配的 :ref 在 v-for 循环中呈现)。
Vue 3 中的相同代码失败，当我注销 this.$refs对象是空的。
在这里我想访问一个'isOrderable ' 所有 child 的属性(property)。问题似乎出在 :ref="product.id" 上。作为一个变量。如果我将其更改为 ref="foobar"然后我确实得到了 this.$refs.foobar 中的最后一个 child .但它 vue2 我一个包含所有子组件的数组。

  <script>
  import productItem from "./Product.vue";
  export default {
    props: ["products"],
    components: {
      'product-item': productItem
    }
    methods: {
      addAllProducts() {
        const orderable = this.products.filter((p) => this.$refs[p.id][0].isOrderable);
        ...
      }
    }
  }
  </script>

  <template>
    <form>
      <div v-for="product in products" :key="product.id">
        <product-item :product="product" :ref="product.id" />
      </div>
      <button @click="addAllProducts">Add All</button>
    </form>
  </template>

显然 vue3 发生了一些变化，但我找不到任何关于它的信息。 this.$refs 上有很多信息, 但这一切都与从组合 API 访问 refs 有关。
任何帮助表示赞赏。

Answer 1

在 vue 3 中，它们改变了 refs 如何处理数组，现在您需要传递一个函数并在您的数据上设置一个状态来跟踪您的 refs https://v3.vuejs.org/guide/migration/array-refs.html#frontmatter-title .
我不知道您的代码是如何构造的，但也许有比使用 refs 更好的解决方案来解决您的问题，如果在产品项目可订购时切换的逻辑存在于产品项目组件中，您可以有一个发出的事件当可订购值更改时，使用每个产品的 id 更新一个可订购产品数组，您甚至可以在具有 vue3 的多个 v-models 选项的 v-model 中使用它。这样你就不需要持有dom的引用来过滤那些可订购的。