vue.js - 如何区分 onChange 方法与首次从 nuxt 服务加载数据

Question

我在处理 VueJs select 上的 onChange 事件时遇到问题，

以下是我的逻辑:

我正在使用国家/地区下拉列表，如果选择了加拿大国家/地区，我想使用省份下拉列表，否则我将使用输入字段供用户添加下拉值。

当用户选择国家/地区下拉列表时，我想清除输入字段或下拉列表中的值。

问题:它在正常情况下工作正常，但是当我从服务获取数据并且如果国家/地区不是加拿大时，由于我在国家/地区下拉列表中编写的 onChange 函数，数据会被清除。

如何在不添加新字段的情况下分离此逻辑？我可以在这里使用任何生命周期 Hook 吗？

const eventBus = new Vue ()



Vue.component('ChildA',{
  template:`
    <div id="child-a">
  <select name="country" v-on:change="onChange($event)" class="form-control" v-model="val.contry">
    <option value="CA">Canada</option>
    <option value="Other">Other</option>
  </select>
  <select v-if="val.country == 'CA'" name="province"  class="form-control" 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(e) {
    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>

Answer 1

如果我理解正确的话，也许类似于以下代码片段:

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)" class="form-control" v-model="key.contry">
    <option value="CA">Canada</option>
    <option value="Other">Other</option>
  </select>
  <select v-if="key.country == 'CA'" name="province"  class="form-control" 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>