this.$refs 为空，带有 Vue 3 Options API

Question

在 Vue 2 中，我曾经能够访问组件子项上的属性（使用 this.$refs 和动态分配的 :ref 在 v-for 循环中呈现）。

Vue 3 中的相同代码失败，当我注销时this.$refs，对象为空。

在这里，我想访问isOrderable所有孩子的“ ”属性。问题似乎出在:ref="product.id"变量上。如果我将其更改为，ref="foobar"那么我确实让最后一个孩子进入this.$refs.foobar. 但是它 vue2 me 一个包含所有子组件的数组。

  <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 访问引用有关。

任何帮助表示赞赏。

Answer 1

在 vue 3 中，它们改变了 refs 与数组的工作方式，现在您需要传递一个函数并在数据上有一个状态来跟踪您的 refs https://v3-migration.vuejs.org/writing-changes/array-refs .html#frontmatter-标题.

我不知道你的代码是如何构造的，但也许有比使用 refs 更好的解决方案来解决你的问题，如果切换产品项是否可订购的逻辑位于产品项组件内部，你可以有一个发出的事件当 orderable 值更改时，使用每个产品的 id 更新 orderableProducts 数组，您甚至可以在具有 vue3 的多个 v-models 选项的 v-model 中使用它。这样你就不需要仅仅为了按可排序的过滤而保留 dom 的引用。