如何以编程方式发出包装的 Vuetify 组件的 update:modelValue ？

Question

我创建了以下组件：

<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 中单击其他语言时，它不会更新。 也许这不是正确的方法，你知道我怎样才能实现我的目标吗？

Answer 1

1. 不要使用watchEffect。这是一个丑陋的 React 事情，应该不惜一切代价避免。 Vue 有智能且直观的方法来解决问题。

解决方案

<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>