How to get the differentiation from onChange method vs data loading first time from service in nuxt-CodePudding

I am getting issues while handling the onChange event on VueJs select,

Below is my logic:

I am using the country dropdown and if Country Canada got selected I would like to use the province dropdown otherwise I am using the input field for the user to add dropdown values.

When the user selects the country dropdown, I would like to clear the values from the input field or dropdown.

Problem: It works fine in normal scenarios but when I fetch data from the service and If the country is not Canada, the data is getting cleared due to my onChange functions written in the country dropdown.

How I can separate this logic without adding a new field? Is there any lifecycle hook that I can use here?

const eventBus = new Vue ()



Vue.component('ChildA',{
  template:`
    <div id="child-a">
  <select name="country" v-on:change="onChange"  v-model="val.contry">
    <option value="CA">Canada</option>
    <option value="Other">Other</option>
  </select>
  <select v-if="val.country == 'CA'" name="province"   v-model="val.province">
    <option value="ON">ON</option>
    <option value="PN">PN</option>
  </select>
  <div v-else>
    <input v-model="val.province">
  </div>
</div>`,
  props: ["val"],
  methods: {
    onChange() {
    console.log("called")
      
      if (this.val.country == 'CA'){
        //logics
      } else {
        this.val.province = '';
      }
    }
  }
})

Vue.component('ParentA',{
  template:`
    <div id="parent-a">
      <child-a :val="val"/>
    </div>`,
  data() {
    return {
     val: {
        country: "",
        province: ""
      }
    }
  },
created() {
     setTimeout(() => {
          this.val = {country: "Other",
        province: "test"};
      }, 1000);
  },
})


new Vue ({
    el: '#app',
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <parent-a/>
</div>

CodePudding user response：

If I understood you correctly, maybe something like following snippet:

new Vue({
  el: "#demo",
  data() {
    return {
      key: {
        country: "Other",
        province: "test"
      }
    }
  },
  methods: {
    onChange(e) {
      this.key.country = e.target.value
      if (e.target.value == 'CA'){
        //logics
      } else {
        this.key.province = '';
      }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <select name="country" v-on:change="onChange($event)"  v-model="key.contry">
    <option value="CA">Canada</option>
    <option value="Other">Other</option>
  </select>
  <select v-if="key.country == 'CA'" name="province"   v-model="key.province">
    <option value="ON">ON</option>
    <option value="PN">PN</option>
  </select>
  <div v-else>
    <input v-model="key.province">
  </div>
</div>

CodePudding user response：

Here is some pseudo-code regarding your issue.

<template>
  <div id="demo">
    <select
      v-model="key.country"
      name="country"
      
      @change="onChange"
    >
      <option value="CA">Canada</option>
      <option value="Other">Other</option>
    </select>
    <select
      v-if="key.country == 'CA'"
      v-model="key.province"
      name="province"
      
    >
      <option value="ON">ON</option>
      <option value="PN">PN</option>
    </select>
    <div v-else>
      <input v-model="key.province" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: {
        country: '',
        province: '',
      },
    }
  },
  async fetch() {
    const myCoolData = await this.$axios.$get('https://...')
    this.key.country = myCoolData.country
  },
  // asyncData() hook can also be used rather than then fetch() one
  // if you want to have a blocking client-side navigation

  // async asyncData({ $axios }) {
  //   const myCoolData = await $axios.$get('https://...')

  //   return {
  //     key: myCoolData.country,
  //   }
  // },
  methods: {
    onChange() {
      console.log('called')

      if (this.key.country === 'CA') {
        // logics
      } else {
        this.key.province = ''
      }
    },
  },
}
</script>