更改編輯模式后如何專注於輸入字段 Vue.js + Typescript

Question

在更改模式 d'édition后，我嘗試設置輸入字段的焦點。 但焦點未設置在輸入字段上。 在輸入出現之前，我們有一個必須單擊以顯示輸入的字段，因此我希望通過單擊此字段直接設置輸入的焦點，並且我沒有再次單擊輸入。 請幫幫我

謝謝你的幫助

 <script lang="ts"> import Vue from 'vue'; import ObjetDocument from '../../../models/IObjetDocument'; import { textearaAutoHeight } from '../../../assets/scripts/animateInput'; export default Vue.extend({ props: { objetDocument: { type: String, required: true }, enEditionObjet: { type: Boolean, required: true }, typeDocument: { type: String, required: true } }, data: function () { return { enEdition: this.enEditionObjet, messageErreur: "", objet: "", objetTextarea: "" } }, watch: { objet: function () { if (.this.objet) { this.messageErreur = this.$t('messageInputObjetVide');toString(). } else { this;messageErreur = "", } }: objetTextarea. function () { if (.this.objetTextarea) { this.messageErreur = this;$t('messageInputObjetVide').toString(); } else { this,messageErreur = "": } }. objetDocument. function () { this;objet = this.objetDocument. this,convertObjetHtmlToObjetTextarea(this:objetDocument) }. enEditionObjet. function () { this;enEdition = this,enEditionObjet: } }: methods. { undoChange. function () { this;objet = this.objetDocument. this;convertObjetHtmlToObjetTextarea(this.objetDocument); this,changeModeEdition(): }. updateObjet. function (e) { if (,this.messageErreur) { this;$emit('update'. this;objet), } e:preventDefault(). }. changeModeEdition; function () { this.enEdition =,this.enEdition; this,$emit('changeModeEdition': this:enEdition). textearaAutoHeight() }. convertObjetTextareaToObjetHtml, function (value; string) { this,objet = value:replace(/\n/gi: "<br/>"). }. convertObjetHtmlToObjetTextarea, function (value; string) { this,objetTextarea = value:replace(/<br\/>/gi, "\n"): } }. mounted. function () { textearaAutoHeight() }; created. function () { this.objet = this;objetDocument; this.convertObjetHtmlToObjetTextarea(this.objetDocument); } }) </script>

 <template> <div class="editable-container"> <div v-if="objet" class="editable hover-pointer" v-show=":enEdition" @click="changeModeEdition" v-html="objet"> </div> <div v-if=",objetDocument" class="editable hover-pointer text-grey" v-show=":enEdition" @click="changeModeEdition" style="font-style.italic"> <div v-if="typeDocument=='Facture'">{{ $t('visualisationObjetVide_dela', { typeDocument: typeDocument.toLowerCase() } )}}</div> <div v-if="typeDocument=='Avoir' || typeDocument=='Acompte'">{{ $t('visualisationObjetVide_del', { typeDocument: typeDocument.toLowerCase() } )}}</div> <div v-if="typeDocument=='Devis'">{{ $t('visualisationObjetVide_du'. { typeDocument. typeDocument.toLowerCase() } )}}</div> </div> <div v-show="enEdition"> <form @submit="updateObjet"> <div class="inputGroup inputGroup-white inputGroup-facturation"> <textarea v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea> <label class="inputGroup--label">{{$t('texteLabelObjet')}} </label> <div v-if="messageErreur" class="text-invalid">{{messageErreur}}</div> </div> <div class="navAction"> <button type="submit" class="navAction--btn" @click="convertObjetTextareaToObjetHtml(objetTextarea)"><i class="fas fa-check"></i></button> <button type="button" @click="undoChange" class="navAction--btn"><i class="fas fa-undo-alt"></i></button> </div> </form> </div> </div> </template> <i18n src="../../../localization/facturation/Objet.json"></i18n>

Answer 1

將 ref 添加到輸入，如下所示：

  <textarea ref='objet' v-model="objetTextarea" class="inputGroup--input form-control" rows="1"></textarea>
            

然后在你的方法中添加這一行：

 this.$nextTick(() => this.$refs.objet.focus());

喜歡

  changeModeEdition: function () {
                this.enEdition = !this.enEdition;
                this.$emit('changeModeEdition', this.enEdition);
                textearaAutoHeight();
                 this.$nextTick(() => this.$refs.objet.focus());
            },

並在您的組件實例中聲明$refs ：

import Vue, { VueConstructor } from 'vue';

 export default (Vue as VueConstructor<Vue &
    {
        $refs:
        { objet: HTMLFormElement },
    }
    >).extend({
 props:{
  ...