Vue3 和 Typescript 错误：属性“$el”不存在于类型“void”上。如何正确抓取 DOM 中存在的每个标签类型？

发布于 2025-01-12 01:09:15 字数 838 浏览 0 评论 0 原文

我正在将 Vue2 项目转换为 Vue3 和 Typscript。有很多奇怪的错误，但我不确定如何在 $el 上处理这个错误。

我只是想抓住上面模板中的每个标签，我可以，但这个错误仍然存在。

关于如何解决这个问题有什么想法吗？

这里是组件的模板，但是整个组件太大了，无法放在 stackoverflow 上。我需要定位的标签。

<template>
  <div class="pep-header-decoration-light">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1158.942"
      height="143.376"
      viewBox="0 0 1158.942 143.376"
    >
      <g :style="`color: ${colors.green}`">
        <!-- ... -->
      </g>
      <!-- many more g elements to select here too -->
    </svg>
  </div>
</template>

原文

I am in the process of converting a Vue2 project into Vue3 and Typscript. There are plenty of bizzare errors, but I am not sure how to handle this one on $el.

I am just looking to grab every <g> tag in the template above and I can, but this error persists.

Any ideas on how to fix this?

Here is the template of the component, but the entire component is too big to put on stackoverflow. I need to target the <g> tag of.

<template>
  <div class="pep-header-decoration-light">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width="1158.942"
      height="143.376"
      viewBox="0 0 1158.942 143.376"
    >
      <g :style="`color: ${colors.green}`">
        <!-- ... -->
      </g>
      <!-- many more g elements to select here too -->
    </svg>
  </div>
</template>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

水溶 2025-01-19 01:09:15

正如问题Vue 3 Composition API - 如何获取安装了组件的组件元素($el)一样，Vue 3 不鼓励使用 $el，因为组件可以有多个顶级元素。此外，你的箭头函数不会重新定义 this，并且 此在setup：

setup() 本身无权访问组件实例 - this 在 setup() 中的值为 null ）。您可以从 Options API 访问 Composition-API 公开的值，但反之则不行。

，您可能应该为封闭的 div 或封闭的 svg 定义一个 ref，并使用它来获取您的元素：

<template>
  <div class="pep-header-decoration-light" ref="divEl">
    <svg [...]>
      <!-- ... -->
    </svg>
  </div>
</template>

鉴于此您需要在 setup 返回的对象中返回新的 ref，并且它需要与模板中的名称相同。您可以稍后使用 this.$refs.divEl 访问此内容，但在 setup 函数中，您无权访问 this 来访问this.$refs。

setup(props) {
  const divEl = ref<HTMLDivElement>(); // create the ref here
  onMounted(() => {
    // no `this` and no `$el`, so use `divEl.value`
    const shapes = divEl.value.querySelectorAll("svg > g");
    // ...
  });
  // ...
  return {divEl}; // exposes the ref named `divEl`, and since it matches
                  // the template, vue will populate it during mount
}

As in the question Vue 3 Composition API - How to get the component element ($el) on which component is mounted, Vue 3 discourages the use of $el, since components can have more than one top-level element. Furthermore, your arrow function won't redefine this, and this is not available in setup:

setup() itself does not have access to the component instance - this will have a value of null inside setup(). You can access Composition-API-exposed values from Options API, but not the other way around.

Given that, you should probably define a ref for either your enclosing div or your enclosing svg, and use that to get to your element:

<template>
  <div class="pep-header-decoration-light" ref="divEl">
    <svg [...]>
      <!-- ... -->
    </svg>
  </div>
</template>

Note that you'll need to return the new ref in the object that setup returns, and that it needs the same name that it has in the template. You can access this later using this.$refs.divEl, but in the setup function you don't have access to this to get to this.$refs.

setup(props) {
  const divEl = ref<HTMLDivElement>(); // create the ref here
  onMounted(() => {
    // no `this` and no `$el`, so use `divEl.value`
    const shapes = divEl.value.querySelectorAll("svg > g");
    // ...
  });
  // ...
  return {divEl}; // exposes the ref named `divEl`, and since it matches
                  // the template, vue will populate it during mount
}

回复收藏 0 原文

~没有更多了~