如何通过数据绑定将对象传输到父组件 - Vue.js

Question

在我的 Vuejs 应用程序中，我有一个 select 元素，用户可以在其中选择一个国家/地区。国家元素看起来像：

country {  
  id: 1,  
  name: 'Germany',  
  sort: 1 
}

我从我的数据库（称为国家/地区）中获取这些国家/地区对象的列表，并将它们加载到我的选择中：

<select 
  id="countrySelect" 
  :value="country" 
  @change="$emit('update:country', $event.target.value);"> 
  <option selected disabled>Choose...</option> 
  <option v-for="data in countries" :value="data" :key="data">{{ data.name }}</option> 
</select>

props: {   country: Object }

emits: ['update:country']

现在在我的父组件中，我实现了此组件，并希望在国家/地区选择发生更改时将商店中的国家/地区对象设置为所选对象。

<countryComponent :country=store.requestObject.country @update:country="changeCountry" />

现在在我的方法changeCountry中，我尝试将商店中的值设置为选定的国家/地区对象，例如：

changeCountry(value) { 
 console.log(value) //returns [Object object] 
 this.store.requestObject.country = value; 
}

由于某些原因我无法直接使用v-model。我的主要问题是我的方法中的值始终是 [Object object] 而不是真实的对象本身。另外，在我的商店中，store.requestObject.country 的值是“[Object object]”。是不是可以通过这种绑定传输对象，或者我做错了什么？

我的商店对象看起来像：

requestObject: {
 country:Object,
 ...
}

Answer 1

您面临的问题与如何在

value

元素中设置

<select>

属性有关。当您使用

:value="country"

时，它将

<select>

的值设置为整个对象，而不仅仅是

id

或其他唯一标识符。因此，当您尝试访问

changeCountry

方法中的值时，您将得到

[Object object]

。

要解决此问题，您可以使用唯一标识符（如

id

）作为

<select>

元素中的值。以下是修改代码的方法：

在您的

<select>

元素中：

<select 
  id="countrySelect" 
  :value="country.id"  <!-- Use a unique identifier, e.g., id -->
  @change="$emit('update:country', countries.find(c => c.id == $event.target.value));"> 
  <option selected disabled>Choose...</option> 
  <option v-for="data in countries" :value="data.id" :key="data.id">{{ data.name }}</option> 
</select>

在你的父组件中：

<countryComponent :country="store.requestObject.country" @update:country="changeCountry" />

现在，在您的

changeCountry

方法中，您应该能够直接将选定的国家/地区对象设置为商店：

changeCountry(value) { 
  console.log(value);
  this.store.requestObject.country = value; 
}

这样，您就可以使用

id

作为

<select>

元素中的值，并且当选择更改时，您可以根据其

id

找到相应的国家/地区对象并将其发送到父组件。这应该允许您在商店中设置选定的国家/地区对象，而不会出现任何问题。