将下拉值发送给父级

Question

我父母有此表格：

<b-form @submit="onSubmit">

  <CountryDropdown/>

</b-form>
</template>

<script>
import ...

export default {
  form: {
    country: ''
  }
}


</script>

这是我使用vue-select的Dropdown组件：

<v-select label="countryName" :options="countries" />

export default {
data() {
    return {
        countries: [
            { countryCode: 'EE', countryName: 'Estonia' },
            { countryCode: 'RU', countryName: 'Russia' }
        ]
    }
}

我需要将CountryCode值传递给我的父母form.country

我尝试使用$ emit，但我似乎无法弄清楚如何选择它将在提交后设置父值。

Answer 1

computed: {
    countryNames() {
      return this.countries.map(c => c.countryName)
    }
  },

然后您需要像这样在v-select中列出名称：

<v-select label="countryName" :items="countryNames" @change="selectedCountry" />

[您将看到@change正在调用一个方法，这将是发出您的国家代码的方法，它可以像这样：
methods: {
    selectedCountry(e) {
      let code = this.countries.find(cntry => cntry.countryName === e)
      this.$emit('code', code.countryCode)
    }
  },

您将需要在父母中使用一个听众来收听发出的声音，因此添加如下内容：
<CountryDropdown v-on:code="countryCodeFunction"/>

然后您只需要在方法中使用countryCodeFunction（）即可对发出的代码进行处理。