vuejs3.2 脚本设置 - 动态 $ref答案

【问题标题】：vuejs3.2 script setup - dynamic $refvuejs3.2 脚本设置 - 动态 $ref
【发布时间】：2023-01-18 18:51:45
【问题描述】：

我尝试创建动态摘要。

<template>
    <ul>
        <li v-for="(categorie, i) in categories" :key="i" class="cursor-pointer text-capitalize q-mb-sm" @click="scrollMeTo('categorie'+i)">{{ categorie }}</li>
    </ul>
</div>
.....

</template>
<script setup>
import { ref } from 'vue'
let categorie0 = ref(null)
let categorie1 = ref(null)
let categorie2 = ref(null)
let categorie3 = ref(null)
let categorie4 = ref(null)
let categorie5 = ref(null)
let categorie6 = ref(null)
let categorie7 = ref(null)
....
function scrollMeTo(refName) {
  [refName].value.scrollIntoView({ behavior: "smooth" });
}
...
</script>

在 3.2 和脚本设置之前，我使用此函数滚动 id，但我不明白如何动态生成 ref 值。

function scrollMeTo(refName) {
  let element = this.$refs[refName];
  refName.value.scrollIntoView({ behavior: "smooth" });
}

【问题讨论】：

标签： javascript vue.js vuejs3

【解决方案1】：

检查这个

从 Vue v3.2.25 开始有 Refs inside v-for。它看起来很像你想要达到的目标。

需要 Vue v3.2.25 或以上版本

<script setup>
import { ref, onMounted } from 'vue'

const list = ref([1, 2, 3])

const itemRefs = ref([])

onMounted(() => {
  alert(itemRefs.value.map(i => i.textContent))
})
</script>

<template>
  <ul>
    <li v-for="item in list" ref="itemRefs">
      {{ item }}
    </li>
  </ul>
</template>

Vue SFC Playground

【讨论】：