我使用 vue 3，我想通過按鈕單擊來操作單個串列項
這是我的html：
<socialDiv v-for="(follower, i) in followerList" :key="follower.id" :ref="el => { followerDiv[i] = el }">
<div class="text-md text-gray-800">{{ follower.name }}</div>
<div class="text-sm text-gray-500">{{ follower.username }}</div>
<button @click="handleBtnClick" id="fbtn">{{ follower.btn }}</button>
這是我的腳本：
<script setup>
const followerDiv = ref({})
function handleBtnClick() {
console.log(followerDiv.value)
}
</script>
這是我的輸出：
我能夠訪問 followerDiv.value[0] 但我無法將專案本身作為 DOM 元素進行操作。
如何將子項作為 DOM 元素訪問？
更新：
要訪問串列項，我必須在值后添加“$el”。
我可以通過以下方式訪問這些值：
followerDiv.value[i].$el.style.background = "red"
uj5u.com熱心網友回復：
如果我理解正確，您可以將索引傳遞給您的函式：
const { ref } = Vue
const app = Vue.createApp({
setup() {
const followerDiv = ref({})
const followerList = ref([{id: 1, name: 'aa', username: 'aa', btn: 'aa'}, {id: 2, name: 'bb', username: 'bb', btn: 'bb'}])
function handleBtnClick(i) {
followerDiv.value[i].style.color = "red"
}
return {
followerList, followerDiv, handleBtnClick
}
},
})
app.mount('#demo')<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
<div v-for="(follower, i) in followerList" :key="follower.id" :ref="el => { followerDiv[i] = el }">
<div class="text-md text-gray-800">{{ follower.name }}</div>
<div class="text-sm text-gray-500">{{ follower.username }}</div>
<button @click="handleBtnClick(i)" id="fbtn">{{ follower.btn }}</button>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/531066.html