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

您可以使用this.$nextTick

showMyTF() {
  this.showTextField = true;

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

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

}

jsfiddle中的演示

Answer 2

您还可以使用两个单独的事件触发器，即@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();
    }
  },

VUE：通过v-if

2 个答案: