在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/HTML/ vue關(guān)于ref的一個(gè)問(wèn)題

vue關(guān)于ref的一個(gè)問(wèn)題

這個(gè)例子中為什么結(jié)果是 [li, li, li, li, li, li]呢 而不是item對(duì)應(yīng)的值呢？

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="vue.js"></script>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="(item,index) in msg" ref=item @click=test()>{{item}}</li>
    </ul>
</body>
</div>
<script type="text/javascript">
        var test=new Vue({
            el:'#app',
            data:{
                msg: ["a","b","c","d","e","f"]
            },
            methods:{
                test(){
                    console.log(this.$refs.item)
                }
            }
        })
    </script>
</html>
回答
編輯回答
近義詞

<li v-for="(item,index) in msg" @click=test(index)>{{item}}</li>

test(index){

console.log(this.msg[i])

}
不是這樣獲取值嗎？

2017年2月18日 00:18
編輯回答
念舊

v-for對(duì)應(yīng)的ref是domList數(shù)組
普通ref對(duì)應(yīng)的單個(gè)DOM

2018年7月14日 05:56
編輯回答
孤影

因?yàn)槟阊h(huán)生成了很多ref為item的li標(biāo)簽，所以你獲取的就是你現(xiàn)在看到的。

2018年7月9日 20:16
編輯回答
寫(xiě)榮

理解錯(cuò)啦，ref的值從來(lái)都是元素或者組件，不會(huì)是你的a, b, c字符串的
如果你想為每個(gè)li動(dòng)態(tài)生成一個(gè)ref，之后獲取點(diǎn)擊的item，可以用以下代碼

<ul>
    <li v-for="(item,index) in msg" :ref="item" @click=test(item)>{{item}}</li>
</ul>
test(item){
    console.log(this.$refs[item])
}
2017年8月8日 15:44