Vue this.$refs gets the difference between static and dynamic elements

<template>
    <div class="warpper">
        <button @click="alert">test</button>
        <ul >
            <li  ref="lk" key="22">lk</li>
            <li  ref="lk" key="21">lk</li>
            <li v-for="i in 4" ref="li" :key="i">li</li>
        </ul>
    </div>
</template>

<script>
export default{
    methods:{
        alert(){
            var lk=this.$refs.lk
            var li=this.$refs.li
            console.log(lk)
            console.log(li)
        }
    },
}
</script>

print result:

clipboard.png

the question is:
Why $refs can only get one static li element, while the dynamic one can get more than one. Please give me some advice

.
Html5 javascript vue.js
Apr.29,2021

ref is equivalent to an id, reference to an element or component that is overwritten by adding $refs, after the first way of writing, which must be unreasonable, id repetition. The second kind of vue has special processing for for, refer to the documentation.

when ref and v-for are used together, the reference you get will be an array of these subcomponents of the corresponding data source.

ide/components-edge-cases.html-sharp%E8%AE%BF%E9%97%AE%E5%AD%90%E7%BB%84%E4%BB%B6%E5%AE%9E%E4%BE%8B%E6%88%96%E5%AD%90%E5%85%83%E7%B4%A0" rel=" nofollow noreferrer "> https://cn.vuejs.org/v2/guide.

Previous: Solution to python problem

Next: How to set permissions for managers? If there is a problem with the modification, WHERE.? under the revision method.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu