v-model su dropdown

Cristiano Magro

2025-01-08 9f20397f5fa48aa2ba0b48f47ebc3c853dfd1137

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

@@ -1,16 +1,16 @@
<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>
      <input id="age" name="age" type="number" />
      <input id="age" name="age" type="number" v-model="userAge" ref="inputAge" />
    </div>
    <div class="form-control">
      <label for="referrer">How did you hear about us?</label>
      <select id="referrer" name="referrer">
      <select id="referrer" name="referrer" v-model="referrer">
        <option value="google">Google</option>
        <option value="wom">Word of mouth</option>
        <option value="newspaper">Newspaper</option>
@@ -51,6 +51,34 @@
    </div>
  </form>
</template>

<script>
export default {
  data() {
    return {
      userName: '',
      userAge: null,
      referrer: 'wom',
    }
  },
  methods: {
    submitForm() {
      console.log('Username: ' + this.userName);
      this.userName = '';
      console.log('User age: ');
      console.log(this.userAge); //number
      console.log(this.$refs.inputAge.value);  //string
      console.log(18);

      console.log('referrer: ' + this.referrer);
      this.referrer = 'wom';

      this.userAge = null;
    }
  }

}
</script>

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

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