ToCode

[ynonp]

או התחברו באמצעות:

---

זהו נושא דיון מלווה לערך המקורי שב־https://www.tocode.co.il/bundles/vue/lessons/10-components-exercise

[zstorch]

פתרון אפשרי לתרגיל בחירת צבע

<script setup lang="ts">
import { ref } from "vue";
const { i = '#886644' } = defineProps<{ i: string }>()
const color = ref(i)
</script>

<template>
    <p>
        <input type="color" v-model="color" />
        <div>{{ color }}</div>
    </p>
</template>

<style scoped>
p {
    display: flex;
    align-items: center;
    gap: 10px;
}
input {
    height: 3rem;
}
div {
    padding: 1rem;
    background-color: v-bind(color);
}
</style>

[ynonp]

עדיף לקרוא ל prop בשם יותר אינפורמטיבי כמו initialColor