Lorsque span class = "before-click" est cliqué,
Je veux qu'il soit caché, et saisissez class = "after-click" à la place.
Et la balise d'entrée affichée doit être focalisée!
Le problème est lorsque j'essaie d'utiliser $ refs.afterClick pour accéder à ce DOM et lui donner .focus (), une erreur inattendue montre que .focus () n'est pas une fonction.
Comment résoudre ce problème? Merci.
var myApp = new Vue({
el: '#app',
data: {
onEdit: false,
msg: 'Something in here',
},
methods: {
switchAndFocus() {
if(!this.onEdit) {
this.onEdit = true;
this.$refs.afterClick.focus();
}
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<span class="before-click" @click="switchAndFocus()" v-show="!onEdit">{{msg}}</span>
<input type="text" class="after-click" ref="afterClick" :value="msg" v-show="onEdit">
</div>
Envelopper l'événement focus dans un nextTick - cela reportera l'événement focus jusqu'à ce que le DOM ait mis à jour et affiché l'entrée.
https://vuejs.org/v2/api/#Vue-nextTick
var myApp = new Vue({
el: '#app',
data: {
onEdit: false,
msg: 'Something in here',
},
methods: {
switchAndFocus() {
if(!this.onEdit) {
this.onEdit = true;
this.$nextTick(function(){
this.$refs.afterClick.focus();
});
}
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
<span class="before-click" @click="switchAndFocus()" v-show="!onEdit">{{msg}}</span>
<input type="text" class="after-click" ref="afterClick" :value="msg" v-show="onEdit">
</div>