VUE: выбор входа после его показа через v-if

Question

У меня есть следующая разметка:

<div id="app">
  <button class="button is-primary" @click="showMyTF" ref="mybtn">
    Show my Textfield: 
  </button>
  <input class="input" type="text" value="My textfield value" 
  class="formfield" v-if="showTextField" ref="mytf"/>
</div>

и код Vue:

new Vue({
  el: "#app",
  data: {
    showTextField: false
  },
  methods: {
    showMyTF() {
        this.showTextField = true;

      this.$refs.mybtn.innerText = "There you have it";
      this.$refs.mytf.select();
    }
  }
})

Я сделал пример JSFiddle здесь: https://jsfiddle.net/Pintiboy/Lkec1n5g/

Мой вопрос здесь: Можно ли выделить текст текстового поля сразу после его показа (нажав на кнопку). Он работает после того, как он там (нажмите кнопку второй раз), но я хочу, чтобы он был выбран сразу после его появления. Есть идеи?

Answer 1

Вы также можете иметь два отдельных триггера событий, @mousedown и @click для вызова отдельных функций.

<button class="button is-primary" @mousedown="showMyTF" @click="selct" ref="mybtn">
    {{buttonText}}
</button>
<input class="input" type="text" value="My textfield value" class="formfield" v-if="showTextField" ref="mytf"/>

и в вашем скрипте:

data: () => ({
    showTextField: false
  }),
  computed: {
    buttonText() {
      if(this.showTextField === false) {
        return 'Show my Textfield:'
      } else {
        return 'There you go'
      }
    }
  },
  methods: {
    showMyTF() {
      this.showTextField = true;
    },
    selct() {
      this.$refs.mytf.select();
    }
  },

Answer 2

Вы можете использовать this.$nextTick

showMyTF() {
  this.showTextField = true;

  this.$refs.mybtn.innerText = "There you have it";

  this.$nextTick(() => {
    this.$refs.mytf.select();
  })

}

Демонстрация в jsfiddle