v-model with Checkboxes and Radiobuttons

Cristiano Magro

10 days ago 0adb44f6a15591ed98fa92ddae6fccf6ffd52373

v-model with Checkboxes and Radiobuttons

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

@@ -19,32 +19,36 @@
    <div class="form-control">
      <h2>What are you interested in?</h2>
      <div>
        <input id="interest-news" name="interest" type="checkbox" />
        <input id="interest-news" name="interest" type="checkbox" value="news" v-model="interest" />
        <label for="interest-news">News</label>
      </div>
      <div>
        <input id="interest-tutorials" name="interest" type="checkbox" />
        <input id="interest-tutorials" name="interest" type="checkbox" value="tutorials" v-model="interest" />
        <label for="interest-tutorials">Tutorials</label>
      </div>
      <div>
        <input id="interest-nothing" name="interest" type="checkbox" />
        <input id="interest-nothing" name="interest" type="checkbox" value="nothing" v-model="interest" />
        <label for="interest-nothing">Nothing</label>
      </div>
    </div>
    <div class="form-control">
      <h2>How do you learn?</h2>
      <div>
        <input id="how-video" name="how" type="radio" />
        <input id="how-video" name="how" type="radio" value="video" v-model="how" />
        <label for="how-video">Video Courses</label>
      </div>
      <div>
        <input id="how-blogs" name="how" type="radio" />
        <input id="how-blogs" name="how" type="radio" value="blogs" v-model="how" />
        <label for="how-blogs">Blogs</label>
      </div>
      <div>
        <input id="how-other" name="how" type="radio" />
        <input id="how-other" name="how" type="radio" value="other" v-model="how" />
        <label for="how-other">Other</label>
      </div>
    </div>
    <div class="form-control">
      <input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
      <label for="confirm-terms">Agree to terms of use?</label>
    </div>
    <div>
      <button>Save Data</button>
@@ -59,6 +63,9 @@
      userName: '',
      userAge: null,
      referrer: 'wom',
      interest: [],
      how: null,
      confirm: false,
    }
  },
  methods: {
@@ -69,11 +76,21 @@
      console.log(this.userAge); //number
      console.log(this.$refs.inputAge.value);  //string
      console.log(18);
      this.userAge = null;

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

      this.userAge = null;
      console.log('Checkbox: ');
      console.log(this.interest);
      console.log('Radio buttons: ');
      console.log(this.how);
      this.interest = [];
      this.how = null;

      console.log('Confirm');
      console.log(this.confirm);
      this.confirm = false;
    }
  }