Question

我希望在Vue应用程序中状态发生变化时运行一个功能。在我的组件中，我可以获取isOpen的布尔状态。我希望运行一个在模式打开且isOpen设置为true时将焦点添加到表单输入的函数。我尝试使用观察程序，但没有运气。我通过在html中调用：class =“ {'is-open'：search.isOpen}”并通过CSS显示它来打开我的模式。任何帮助将不胜感激。

var source = NSAttributedString(string: "I*** code*** with*** swift")
 var splitter = "***"
 var array = //The method I am looking for

Answer 1

我不确定您的模板是什么样子，但这是我将重点放在条件元素上的方式。

元素

<input type="text" class="search-input" v-model="search" :class="{'collapsed-search': hideInput}" placeholder="Enter keyword" ref="search">

注意输入中的ref="search"。

这是输入条件为真时的方法

toggleSearch() {
  this.hideInput = !this.hideInput
   this.search = ''
   setTimeout(() => {
      this.$refs.search.focus()
  }, 1000)
}

this.$refs.search.focus()在元素完全创建之后被调用，这是setTimeout

的目的。

Answer 2

请检查我的片段，该片段显示了在Vue.js中工作的好方法，您可以使用refs而不是document.getElementById（）很有用

new Vue({
  el: '#app',
  data: {
    isOpen: false,
  },
  computed: {
    
  },
  watch: {
    isOpen(){
      if(this.isOpen){
        this.$nextTick( function () {
            this.formfocus();
          }
        );
      }
    }
  },
  methods: {
    formfocus(){
      this.$refs.search.focus();
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>

<div id="app">
  <button v-on:click="isOpen = !isOpen">show modal</button>
  <div v-if="isOpen">
    <input ref="search" type="text" placeholder="search">
  </div>
</div>

编辑：我在手表上添加了条件，希望这可以解决问题

状态更改时如何在Vue.js中运行函数

2 个答案: