Set focus on input element with Vue - vue.js

Question

I try to code an inline edit element. I like to have the focus on the input, after click. Here my code:
<span v-show="!name.edit" #click="toggleEdit(this, name)">{{name.val}}</span>
<input type="text"
v-model="name.val"
v-show="name.edit"
v-on:blur=" saveEdit(this, name)"
>
</div>
data: function () {
return {
name: {
val: '',
edit: false
},
}
},
methods: {
...mapMutations([
]),
toggleEdit: function(ev, obj){
obj.edit = !obj.edit;
console.log(obj)
if(obj.edit){
Vue.nextTick(function() {
ev.$$.input.focus();
})
}
},
saveEdit: function(ev, obj){
//save your changes
this.toggleEdit(ev, obj);
}
},
But it's still not working.

Answer 1

Try puting $ref in that specific input and vue.nextTick should be this.$nextTick:
like this:
<input type="text"
ref="inputVal"
v-model="name.val"
v-show="name.edit"
v-on:blur=" saveEdit(this, name)"
>
this.$nextTick(function() {
this.$refs.inputVal.focus();
});
https://codesandbox.io/s/keen-sutherland-euc3c
Usually for dynamic elements i would do this:
<template>
<div>
<template v-for="name in names">
<span :key="name.name" v-show="!name.edit" #click="toggleEdit(this, name)">{{name.val}}</span>
<input
:key="name.name"
type="text"
:ref="name.val"
v-model="name.val"
v-show="name.edit"
v-on:blur=" saveEdit(this, name)"
>
</template>
</div>
</template>
<script>
export default {
name: "App",
components: {},
data: function() {
return {
names: [
{
val: "TEST1",
edit: true
},
{
val: "TEST2",
edit: true
},
{
val: "TEST3",
edit: true
}
]
};
},
methods: {
toggleEdit: function(ev, obj) {
obj.edit = !obj.edit;
console.log(obj);
if (obj.edit) {
this.$nextTick(function() {
this.$refs[`${obj.val}`][0].focus();
});
}
},
saveEdit: function(ev, obj) {
//save your changes
this.toggleEdit(ev, obj);
}
}
};
</script>