在我的一个组件中,我有一个窗体,它会根据单选按钮的值更改窗体。
我的组件看起来像这样:
<template>
<div>
<div>
<label>
<input
class="radio"
name="groupInput"
type="radio"
value="one"
v-model="groupActive"
/>
Group 1
</label>
<label>
<input
class="radio"
name="groupInput"
type="radio"
value="two"
v-model="groupActive"
/>
Group 2
</label>
</div>
<input v-if="groupActive === 'one'" type="text" ref="defaultInput" />
<select v-else ref="defaultInput">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
const groupActive = ref("one");
const defaultInput = ref(null);
onMounted(() => {
defaultInput.value.focus();
});
</script>
Here's a working example
.
当安装部件时,
defaultInput
专注。但当我更改单选按钮的值时
<input>
我关注的是不再可用,我想专注于新的。我怎样才能做到这一点?是否可以更新
ref
新的价值
<select>
然后专注于它?