Vue.js如何将子组件输入数据添加到父组件playersData数组？

你的代码存在几个关键问题导致数据无法正常传递和添加，下面是具体修复方案：

子组件（MyPopUp）修改 #

1. 添加响应式数据 #

在组件的data选项中声明表单绑定变量，用于存储用户输入的姓名、年龄和性别：

export default {
  name: "MyPopUp",
  components: {MyButton, InputText},
  data() {
    return {
      userName: '',
      userAge: '',
      selectedSex: '' // 存储选中的性别
    }
  },
  methods: {
    // ... 原有方法
  }
}

2. 绑定性别单选框 #

给两个radio按钮添加v-model绑定到selectedSex，确保能获取用户选中的性别值：

<div class="sex">
  <div class="text">Пол</div>
  <label>
    <input class="inpSex" type='radio' value="Женский" name='sex' v-model="selectedSex">
    <span class='woman'><img alt="Ж" class="picSex" src="@/components/UI/pics/FemaleSex.svg"></span>
  </label>
  <label>
    <input class="inpSex" type='radio' value="Мужской" name='sex' v-model="selectedSex">
    <span class='man'><img alt="М" class="picSex" src="@/components/UI/pics/MaleSex.svg"></span>
  </label>
</div>

3. 完善addNewPlayer方法 #

触发$emit时传递完整用户数据，同时重置表单并关闭弹窗：

addNewPlayer() {
  // 简单校验必填字段
  if (!this.userName || !this.userAge || !this.selectedSex) {
    alert('请填写所有字段');
    return;
  }
  // 打包数据传递给父组件
  this.$emit('addNewPlayer', {
    name: this.userName,
    age: this.userAge,
    sex: this.selectedSex
  });
  // 重置表单
  this.userName = '';
  this.userAge = '';
  this.selectedSex = '';
  // 关闭弹窗
  this.closePopup();
}

父组件（SessionsPage）修改 #

实现addNewPlayerInConsole方法 #

接收子组件传递的数据，生成符合playersData结构的对象并添加到数组：

addNewPlayerInConsole(playerData) {
  // 生成唯一ID
  const newId = (this.playersData.length + 1).toString();
  // 格式化当前日期为示例样式
  const currentDate = new Date().toLocaleDateString('ru-RU', {
    day: '2-digit',
    month: 'long',
    year: 'numeric'
  });
  // 创建新玩家对象
  const newPlayer = {
    ID: newId,
    PlayerName: playerData.name,
    Age: playerData.age,
    Sex: playerData.sex,
    Status: 'Активен',
    DateOfCreate: currentDate,
    DateOfEdit: currentDate
  };
  // 添加到数组
  this.playersData.push(newPlayer);
}

修改完成后，点击弹窗的"Добавить"按钮，用户输入的数据就会传递到父组件并自动添加到玩家列表中。

内容的提问来源于stack exchange，提问作者klimmm