Vue.js 递归组件 scrollIntoView答案

【问题标题】：Vue.js Recursive component scrollIntoViewVue.js 递归组件 scrollIntoView
【发布时间】：2021-12-22 00:30:18
【问题描述】：

我在 Vue 3 应用程序中有一个页面，它有一个可滚动的 div。 div 的内容是一个递归组件，其中的节点可能有 node.OptionId 字段，也可能没有。我想为相应的 OptionIds 分别设置一些按钮，每当我单击按钮时，可滚动的 div 都会滚动到具有相应 OptionId 的递归组件部分。

例如，我有 OptionId 001，如果我单击 001 按钮，div 将滚动到具有 OptionId 001 的节点。

但是我不知道应该如何实现这种行为。我尝试将 ref 应用于节点，但使用递归组件，只有最后一个节点会获得 ref 属性，而不是所有节点。

主页：

<div>
  <Message
    ref="Message"
  />
</div>

消息组件：

<div v-for="(node, i) in message.Content" :key="i">
  <MessageContent :node="node" ref="MessageContent" />
</div>

以及递归 MessageContent 组件：

<template>
  <div>
    <table>
      <thead>
        <th
          class="label block-title"
          v-if="node.Block"
          :ref="
            node.OptionId !== undefined ? 'OptionId-' + node.OptionId : ''
          "
        >
          {{ node.Name }}
        </th>
      </thead>
      <tbody>
             ...
      </tbody>
    </table>

    <div v-if="node.Items && node.Items.length">
      <MessageContent 
        v-for="(child, i) in node.Items"
        :node="child"
        :key="i"
      >
      </MessageContent >
    </div>
  </div>
</template>

这边

this.$refs.Message.$refs.MessageContent.$refs

只会提出最后一个节点的 ref，即 'OptionId-undefined'。

有没有一种方法可以让我以某种方式为具有未定义的 OptionIds 的 div 创建一个自定义属性，我可以从主页中获取该属性并用于 scrollIntoView？

【问题讨论】：

是的 - 您可以将 DIV 的 id 属性设置为等于 OptionId。然后你可以使用const el = document.getElementById(your_desired_id); if (el) el.scrollIntoView();
@IVOGELOV 是的，谢谢，解决方案比我想象的要简单。出于某种原因，我认为 DOM 元素不会及时加载，因此 getElementById 会返回 null，但幸运的是事实并非如此，这很有效。
嗯，这在很大程度上取决于您的代码 - 如果它是异步的，或者您在安装模板之前调用 getElementById，它可能会中断。但这是一个不同的话题。

标签： javascript html vue.js vuejs3

【解决方案1】：

这是因为您的 MessageContent 只是一个不断被 v-for 项目覆盖的引用。 Vue 3 模板引用只是普通的引用变量。它没有特殊的语法，因此不必是这种静态的。官方文档有专门的部分介绍如何在 v-for 中捕获模板引用：https://v3.vuejs.org/guide/composition-api-template-refs.html#usage-inside-v-for

【讨论】：