vue3組合式API的v-for及ref繫結DOM
阿新 • • 發佈:2022-03-18
組合式 API 模板引用在 v-for
內部使用時沒有特殊處理。需要繫結函式自定義處理。
<template> <div v-for="(item, i) in list" :ref="el => { if (el) divs[i] = el }"> {{ item }} </div> </template> <script> import { ref, reactive, onBeforeUpdate } from 'vue' export default { setup() { const list= reactive([1, 2, 3]) const divs = ref([]) // 確保在每次更新之前重置ref onBeforeUpdate(() => { divs.value = [] }) return { list, divs } } } </script>
Ref
<template> <div ref="root">This is a root element</div> </template> <script> import { ref, onMounted } from'vue' export default { setup() { const root = ref(null) onMounted(() => { // DOM 元素將在初始渲染後分配給 ref console.log(root.value) // <div>This is a root element</div> }) return { root } } } </script>