The Delightful World of Vue Part 2
Loading Animations & Quantity Input
  Start your All-Access Pass to unlock this challenge
Buy Access Login

Challenge 1 / 1

Imagine we wrote a component that needs to take a number and send its value plus 2 to my database (a VERY useful scenario, I know!):

<template>
    <input
        type="number"
        v-model="theNumber"
        min="1"
    />

    <button @click="sendNumber">
        Send!
    </button>
</template>

<script>
import { saveNumber } from '@/services/save-number';

export default {
    name: 'MyComponent',
    data() {
        return {
            theNumber: 0,
        };
    },
    methods: {
        sendNumber() {
            saveNumber(this.theNumber + 2);
        },
    },
};
</script>

But, oh! I've just discovered that there is a massive bug in this code! When I entered the number 1, it saved the number 12 instead of 3! What is the best way to fix this?

Skip challenges and go to theNext Chapter

Turn Challenges Off?

All further challenges will be skipped automatically.
You can re-enable challenges at any time on this page or from your account page.