Vue show hide textbox based on dropdown value

<!DOCTYPE html>
<html>
<head>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="app">
        <h3>Vue show hide textbox based on dropdown value</h3>
        <label for="fruit">Select a fruit:</label>
        <select id="fruit" v-model="selectedFruit">
            <option value="">--Please select--</option>
            <option value="apple">Apple</option>
            <option value="banana">Banana</option>
            <option value="orange">Orange</option>
        </select>

<div v-if="selectedFruit === 'apple'">
            <label for="appleColor">Enter the color of the apple:</label>
            <input id="appleColor" type="text" v-model="appleColor">
            <p v-if="appleColor.length === 0" class="error">Please enter a color.</p>
        </div>

<div v-if="selectedFruit === 'banana'">
            <label for="bananaLength">Enter the length of the banana:</label>
            <input id="bananaLength" type="text" v-model="bananaLength">
            <p v-if="!isNumber(bananaLength)" class="error">Please enter a number.</p>
        </div>

<div v-if="selectedFruit === 'orange'">
            <label for="orangeWeight">Enter the weight of the orange:</label>
            <input id="orangeWeight" type="text" v-model="orangeWeight">
            <p v-if="!isNumber(orangeWeight)" class="error">Please enter a number.</p>
        </div>

<button @click="storeData" :disabled="!isValidInput">Store Data</button>
    </div>
    <script type="module">
        const app = Vue.createApp({
            data() {
                return {
                    selectedFruit: '',
                    appleColor: '',
                    bananaLength: '',
                    orangeWeight: '',
                }
            },
            methods: {
                isNumber(value) {
                    return /^\d+$/.test(value);
                },
                storeData() {
                    // Do something with the entered data, e.g., send it to a server
                    console.log({
                        fruit: this.selectedFruit,
                        appleColor: this.appleColor,
                        bananaLength: this.bananaLength,
                        orangeWeight: this.orangeWeight,
                    });

// Reset the form
                    this.selectedFruit = '';
                    this.appleColor = '';
                    this.bananaLength = '';
                    this.orangeWeight = '';
                },
            },
            computed: {
                isValidInput() {
                    if (this.selectedFruit === 'apple') {
                        return this.appleColor.length > 0;
                    } else if (this.selectedFruit === 'banana') {
                        return this.isNumber(this.bananaLength);
                    } else if (this.selectedFruit === 'orange') {
                        return this.isNumber(this.orangeWeight);
                    } else {
                        return false;
                    }
                },
            },

})

app.mount('#app')
    </script>
    <style scoped>
        #app {
            max-width: 600px;
            margin: 0 auto;
            padding: 40px;
            border: 1px solid #ddd;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            background-color: #fff;
            font-family: Arial, sans-serif;
            color: #333;
        }

/* Style for select element */
        select {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 20px;
        }

/* Style for label element */
        label {
            font-weight: bold;
        }

/* Style for input elements */
        input[type="text"] {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            margin-bottom: 20px;
        }

/* Style for error message */
        .error {
            color: red;
            font-size: 14px;
        }

/* Style for button */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

button:disabled {
            background-color: gray;
            cursor: not-allowed;
        }
    </style>
</body>

</html>