How to run a function in Vue.js when state changes

Question

I'm looking to run a function when the state changes in my Vue app. In my component I'm able to get the boolean state of isOpen. I'm looking to run a function that adds focus to my form input when the modal opens and isOpen is set to true. I've tried using a watcher but with no luck. I'm opening my modal by calling :class="{ 'is-open': search.isOpen }" in the html and showing it via css. Any help would be most appreciated.

data() {
    return {
      isFocussed: this.$store.state.search,
      //checks the state of isOpen?
    }
  },

  computed: {
    search() { return this.$store.state.search },
  },

  watch: {
    isFocussed() {
     this.formfocus()
    },
  },

  methods: {
    formfocus() {
      document.getElementById('search').focus()
    },

Zouheir lin · Accepted Answer · 2019-05-03 11:24:48Z

1

please check my snippet which shows the good way to work in Vue.js, you can work with refs which is very helpful instead of 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>

EDIT: i have added a conditional if on the watch, i hope this solves the problem

edited May 3, 2019 at 11:24

answered May 2, 2019 at 19:53

Zouheir lin

6710 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Billy Brown Over a year ago

Thanks Zouheir for this. However I'm getting 'warning Unexpected unnamed function' error from the $nextTick line?

TJ Weems · Accepted Answer · 2019-05-02 19:35:17Z

0

I am not sure what your template looks like but here is how I set focus on a conditional element.

element

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

notice the ref="search" on the input.

here is the method when the input condition is true

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

this.$refs.search.focus() is called after the element has been fully created which is the purpose of the setTimeout

answered May 2, 2019 at 19:35

TJ Weems

1,1143 gold badges22 silver badges40 bronze badges

Collectives™ on Stack Overflow

How to run a function in Vue.js when state changes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related