v-model on Custom Components

Cristiano Magro

10 days ago b4849707f7cd990a76061f4fa4bf71b66cae0f76

v-model on Custom Components

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

@@ -13,14 +13,22 @@
</template>

<script>export default {
    data() {
        return {
            activeOption: null,
        };
    props: ['modelValue'],
    emits: ['update:modelValue'],
    // data() {
    //     return {
    //         activeOption: null,
    //     };
    // },
    computed: {
        activeOption(){
            return this.modelValue;
        }
    },
    methods: {
        activate(option) {
            this.activeOption = option;
            // this.activeOption = option;
            this.$emit('update:modelValue', option);
        }
    }


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

@@ -49,9 +49,7 @@
    </div>

    <div class="form-control">
      <rating-control>

      </rating-control>
      <rating-control v-model="rating"></rating-control>
    </div>

    <div class="form-control">
@@ -80,6 +78,7 @@
      how: null,
      confirm: false,
      usernameValidity: 'pending',
      rating: null,
    }
  },
  methods: {
@@ -97,14 +96,19 @@

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

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

      console.log('- Rating:');
      console.log(this.rating);
      this.rating = null;

    },
    validateInput() {
      if (this.userName === '') {