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

问题描述 投票:0回答:1

我创建了以下组件:

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

vuejs3 vuetify.js vuetifyjs3
1个回答
0
投票
  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>
© www.soinside.com 2019 - 2024. All rights reserved.