as shown in the figure, dynamically adding a node to a line of text and the corresponding input,input is originally hidden, and the input is displayed after clicking on the text. After that, I want input to get the focus (focus), but I don"t know how to get the input properly (without using the DOM operation).
the code is as follows:: (html file)
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<test v-for="(item,index) in items" :item="item" @show="show"></test>
</div>
<script>
Vue.component("test",{
props:["item"],
template:
`
<div>
<p @click="show($event,item)">{{item.text1}}
<input v-model="item.text1" v-show="item.show_input" :ref="item.text1"></input>
</div>
`,
methods:{
show(event,item){
this.$emit("show",event,item);
}
}
});
new Vue({
el:"-sharpapp",
data:{
items:[
{
"text1":"aaaaaaa",
"show_input":false
},
{
"text1":"bbbbbbb",
"show_input":false
}
]
},
methods:{
show(event,item){
item.show_input=true;
let ref_name=item.text1;
console.log(this.$refs.ref_name); // undefined
}
}
});
</script>