1

我的父母有这个表格：

<template>
  <b-form @submit="onSubmit">
    <CountryDropdown/>
  </b-form>
</template>

<script>
import ...

export default {
  form: {
    country: ''
  }
}
</script>

这是我的下拉组件，使用vue-select：

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

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

我需要将countryCode值传递给其父级的form.country. 我尝试使用$emit，但我似乎无法弄清楚在选择时它将如何设置父值，而不是在提交时。

编辑：

提交的解决方案效果很好，我将在此处添加我的解决方案：

我在 v-select 中添加了一个输入事件：

<v-select @input="setSelected"  ... />

在我的脚本中，我定义了 selected 和 setSelected 方法：

data() 
  return 
    selected: ''

setSelected(value) {
 this.selected = value.countryCode
 this.$emit("selected", value.countryCode)
}

在父母中：

 <CountryDropdown v-on:selected="getCountry />

和父脚本：

 getCountry(country) {
   this.form.country = country
 }
4

2 回答 2

1

您可以使用 Vue 的v-model机制将 to 的输出绑定vue-select到form.country容器中。

在CountryDropdown，实施v-model：

  1. 添加一个prop命名的value1️⃣，并将其绑定到vue-select.value2️⃣
  2. 发出input具有所需值的事件。在这种情况下，我们希望countryCode作为值发出。3️⃣
<template>
  <v-select
    :value="value" 2️⃣
    @input="$emit('input', $event ? $event.countryCode : '')" 3️⃣
  />
</template>

<script>
export default {
  props: ['value'], // 1️⃣
}
</script>

现在，容器CountryDropdown可以绑定form.country到它，在选择时更新form.country为所选国家countryCode：

<CountryDropdown v-model="form.country" />

演示

于 2020-06-10T04:58:52.757 回答
0

正如您似乎知道的，$emit 是您需要用来将事件从组件发送到其父级的东西。要做到这一点，您需要在当前代码中添加更多内容。

要在 v-select 中列出选项，您应该使用计算函数来隔离名称，如下所示：

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() 来处理发出的代码。

于 2020-06-09T11:38:18.073 回答