Vuejs2 VUE：通过v-if显示输入后选择输入

我有以下标记：

<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>

我在这里做了一个JSFIDLE示例：

我的问题是：

---

是否可以在显示文本字段后立即选择文本（通过单击按钮）。它在那里后确实可以工作（再次单击按钮），但我希望它出现后立即被选中。有什么想法吗？

你可以使用

这个。$nextTick

showMyTF() {
  this.showTextField = true;

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

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

}

---

演示在您可以使用

这个。$nextTick

showMyTF() {
  this.showTextField = true;

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

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

}

---

在

中的演示中，您还可以有两个单独的事件触发器，@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"/>

---

您还可以有两个单独的事件触发器，@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"/>

---

哇，从没听说过。谢谢！哇，从没听说过。谢谢！