v-model and inputs

Cristiano Magro

10 days ago 326c8c2a1c3cd899b5fcef10d07f4fae3788d005

 11 - Forms/xno-forms-01-starting-setup/src/components/TheForm.vue

@@ -1,8 +1,8 @@
<template>
  <form>
  <form @submit.prevent="submitForm">
    <div class="form-control">
      <label for="user-name">Your Name</label>
      <input id="user-name" name="user-name" type="text" />
      <input id="user-name" name="user-name" type="text" v-model="userName" />
    </div>
    <div class="form-control">
      <label for="age">Your Age (Years)</label>
@@ -52,6 +52,23 @@
  </form>
</template>

<script>
export default {
  data() {
    return {
      userName: '',
    }
  },
  methods: {
    submitForm() {
      console.log('Username: ' + this.userName );
      this.userName = '';
     }
  }

}
</script>

<style scoped>
form {
  margin: 2rem auto;
@@ -94,8 +111,8 @@
  margin-right: 1rem;
}

input[type='checkbox'] + label,
input[type='radio'] + label {
input[type='checkbox']+label,
input[type='radio']+label {
  font-weight: normal;
}