this.$refs 为空，带有 Vue 3 Options API [英] this.$refs empty with Vue 3 Options API

问题描述

在 Vue 2 中，我曾经能够访问组件子级的属性(在 v-for 循环中使用 this.$refs 和动态分配的 :ref 进行渲染).

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

在这里，我想访问所有孩子的isOrderable"属性.问题似乎在于 :ref="product.id" 是一个变量.如果我将其更改为 ref=foobar"，那么我会在 this.$refs.foobar 中获得 last 子项.但是它 vue2 me 一个包含所有子组件的数组.

 <脚本>从./Product.vue"导入产品项；导出默认{道具:[产品"]，成分: {'产品项目':产品项目}方法: {addAllProducts() {const orderable = this.products.filter((p) => this.$refs[p.id][0].isOrderable);...}}}<模板><表格><div v-for=产品中的产品":key="product.id"><产品项目:产品=产品":ref="product.id"/>

<button @click="addAllProducts">全部添加</button></表单></模板>

显然在 vue3 中发生了一些变化，但我找不到任何有关它的信息.关于 this.$refs 有很多信息，但这都与从组合 API 访问引用有关.

感谢任何帮助.

解决方案

在 vue 3 中，他们改变了 refs 处理数组的方式，现在你需要传递一个函数并在你的数据上有一个状态来跟踪你的 refs https://v3.vuejs.org/guide/migration/array-refs.html#frontmatter-title.

我不知道您的代码是如何构建的，但也许有比使用 refs 更好的解决问题的方法，如果切换产品项是否可订购的逻辑存在于产品项组件中，您可以拥有一个当可订购值更改时发出的事件，更新带有每个产品 ID 的可订购产品数组，您甚至可以在 v-model 中使用 vue3 的多个 v-models 选项.这样你就不需要持有 dom 的引用来过滤那些可订购的.

In Vue 2 I used to be able to access a property on component children (rendered inside a v-for loop using this.$refs and a dynamically-assigned :ref).

The same code in Vue 3 fails, and when I log out this.$refs the object is empty.

Here I'm wanting to access an 'isOrderable' property on all children. The problem appears to be with :ref="product.id" being a variable. If I change it to ref="foobar" then I do get the last child in this.$refs.foobar. But it vue2 me an array back containing all children components.

  <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>

Obviously something changed in vue3 but I can't find any info about it. There's plenty of info on this.$refs, and but it all has to do with accessing refs from the composition API.

Any help appreciated.

解决方案

In vue 3 they change how refs work with arrays, now you need to pass a function and have a state on your data to keep track of your refs https://v3.vuejs.org/guide/migration/array-refs.html#frontmatter-title.

I don't know how your code is structured but maybe there is a better solution to your problem than using refs, if the logic that toggles if a product-item is orderable lives inside the product-item component you can have an event that emits when the orderable value is changed an update an array of orderableProducts with the id of each product, you can even use that in a v-model with the multiple v-models options of vue3. in that way you don't need to hold a reference of the dom just to filter by the ones that are orderable.

这篇关于this.$refs 为空，带有 Vue 3 Options API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！