javascript Vue：在pinia store中更改属性时，在输入上添加焦点

yebdmbv4 于 2023-10-14 发布在 Java

关注(0)|答案(2)|浏览(97)

我有一个组件，它在单击时调用一个函数，该函数在商店中执行操作：

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

在商店里，我改变了这个属性：

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

现在，我如何确保当我在商店中更改这个 focusIn 属性时，它会将焦点设置为MyComponent以外的组件中的输入？

2条答案

你可以试试这个：
1.在输入中添加“ref”：

<template> <input ref="my_template_input"> </template>

1.当你需要的时候，让它聚焦：

this.$refs.my_template_input.focus();

你可以在按钮上添加一个templete ref，并使用它来触发focus（）函数。

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

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

在你的pinia店里

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