Question 263663 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Vue: add focus on an input when changing a property in the pinia store

I have a component that on click calls a function that does things in the store:

<button @click="this.store.foo()"></button>

And in the store I change this property:

state: () => ({
 focusIn: false,
}),
actions: {
 foo() {
   this.focusIn = true;
 }
}

Now how do I make sure that when I change this focusIn property in the store, it sets the focus to an input in a component other than MyComponent?

Tags:

2

Answers


  1. 0

    you can add a templete ref on the button and use it to trigger the focus() function.

    <template>
   <button ref="button" @click="this.store.foo(button)">Button</button>
</template>

<script setup>
const button = ref()
</script>

    And in your pinia store

    state: () => ({
 focusIn: false,
}),
actions: {
 foo(buttonRef) {
   this.focusIn = true;
   buttonRef.focus()
 }
}
    Login or Signup to reply.
  2. 0

    You can try this:

    1. add "ref" to your input:
        <template> <input ref="my_template_input"> </template>
    1. make it focus when you need:
        this.$refs.my_template_input.focus();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search