我创建了以下组件:
<script setup lang="ts">
defineProps<{
langs: string[]
}>()
</script>
<template>
<v-btn-toggle>
<v-btn
v-for="lang in langs"
:key="lang"
:text="$t(`languages.${lang}`)"
:value="lang"
></v-btn>
</v-btn-toggle>
</template>
我这样使用它:
<LangBtnToggle
v-model="selectedLang"
:langs
/>
感谢fallthrough属性机制,
$attrs
绑定到v-btn-toggle
并且一切都按预期工作。
现在我想更改 LangBtnToggle 代码,以便一旦收到 langs
,它就会发出第一个作为默认值,如下所示:
<script setup lang="ts">
import { watchEffect } from 'vue'
const props = defineProps<{
langs: string[]
}>()
const emit = defineEmits(['update:modelValue'])
watchEffect(() => {
emit('update:modelValue', props.langs[0])
})
</script>
<template>
<v-btn-toggle>
<v-btn
v-for="lang in langs"
:key="lang"
:text="$t(`languages.${lang}`)"
:value="lang"
></v-btn>
</v-btn-toggle>
</template>
现在
selectedLang
收到默认值,一切似乎都正常,但是当我从 UI 中单击其他语言时,它不会更新。
也许这不是正确的方法,你知道我怎样才能实现我的目标吗?
解决方案
<script setup lang="ts">
import { ref, onMounted } from 'vue';
const props = defineProps<{
langs: string[];
}>()
const lang = ref<string>('');
onMounted(() => {
lang.value = props.langs.lengs ? props.langs[0] : '';
});
</script>
<template>
<v-btn-toggle v-model="lang">
<v-btn
v-for="lang in props.langs"
:key="lang"
:text="$t(`languages.${lang}`)"
:value="lang"
></v-btn>
</v-btn-toggle>
</template>