Zenn
Open4

Vue3とVuetify覚書

TypeScript
Vue.js
Vuetify
uboaruboar

script setup lang="ts"でpropsの初期値

interface Props {
  modelValue: number
};
const props = withDefaults(defineProps<Props>(), {
  modelValue: 0,
});

withDefaultsを使う

uboaruboar

入力フォームの初期バリデーション(Vuetify)

<script setup lang="ts">
const hogeValid = ref<any>(null);
const mounted = onMounted(() => {
    hogeValid.value.validate();
});
</script>
<template>
    <v-text-field ref="hogeValid" v-model="hoge" :rules="hogeRule"></v-text-field>
</template>

validate()はvalueの中に居る
Vが多いな

uboaruboar

v-textarea(Vuetify)

現在のドキュメントだと何だか表示がミスっているが、他のコンポーネントと同じようにvariantから指定すれば普通に見た目を変えることが出来る

<v-textarea variant="solo"></v-textarea>

まあそのうち更新されるだろう

uboaruboar

Objectのwatch

こういうの忘れがち

watch(config, async (newVal, oldVal) => {
  await writeConfig(newVal);
}, { deep: true });