Vueアプリケーションで役立ちそうなあれこれ

スタイルを動的に変える

スタイルの動的変更

<style scoped>
.input-name{
    /* 変数を割り当てられる */
    background-color: v-bind(color);
}
</style>

<script setup lang="ts">
// 文字列の長さに応じてスタイルを変更
const nameLengthLimit = 15
const isValidName = computed(() => {
    if (inputtingName.value.length >= nameLengthLimit) {
        return false
    } else {
        return true
    }
})

const color = computed(() => {
    return isValidName.value ? "white" : "rgb(244, 194, 90)"
})
</script>

ボタンの無効化

ボタンの無効化

// buttonタグのdisabled属性で可能
// v-bindでTypeScriptの値を渡す
<template>
    <div>
        <button :disabled="!isValidName">register</button>
    </div>
</template>

確認アラート

<script setup lang="ts">
// confirm関数
const onClickDelete = () => {
    if (confirm("hoge")) {
        // OKの場合の処理
    }
}
</script>

参考