Vue.js VueJS3 在 for 循环中获取元素的句柄

发布于09月06日

我有一个如下所示的组件布局:

<div class="list-item" v-for="item in items" :key="item.id">
  <div class="sub-item"></div>
</div>

我遇到的问题是，我如何按需获取该子项元素的句柄？我基本上需要做这样的事情:

从条目ID=X的列表中获取条目.
抓取所选项目下的".subItem"HTMLElement以动态调整元素"yle".

先谢谢你.

推荐答案

要更改for循环中具有特定id的元素，可以在v-for中使用condition，如下所示:

<div id="container" v-for="item in items" :key="item.id">
  <div :class="item.id == ID ? 'sub-item change-width-class' : 'sub-item'"></div>
</div>

您可以监听计时器，并使用watcher:

<template>
    <div id="container" v-for="item in items" :key="item.id">
        <div :id="`sub-item-${currentElementId}`></div>
    </div>
</template>

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

    const timer = ref(0);
    const currentElementId = ref(1);

    // every time timer updates the function below will run
    watch(timer, () => {
        const subItem = document.querySelector(`.sub-item-${currentElementId}`);
        subItem.style.width = (100 * timer / 250); 
    });

</script>