我在pet-project中创建新用户时遇到了一些问题。MyInputs正在获取值：userName和userAge。在这之后，我试图将其发送到parent-element。因此，我需要将其添加到playersData。子元素的代码示例：

`<template>
  <div class="v-popup">
    <img class="closeImg" @click="closePopup()" alt="X" style="float: right" src="@/components/UI/pics/exit.svg">
    <div class="nameTag">Добавить игрока</div>
    <div class="nickname">
      <div class="text" style="text-align: left;">ФИО</div>
      <InputText :value="userName" @input="userName = $event.target.value" class="inp" type="text" placeholder="Иванов Иван Иванович"></InputText>
    </div>
    <div class="lowBlock">
      <div class="age">
        <div class="text">Возраст</div>
        <InputText :value="userAge" @input="userAge = $event.target.value" class="inp" type="text" placeholder="0"></InputText>
      </div>
      <div class="sex">
        <div class="text">Пол</div>
        <label>
          <input class="inpSex" type='radio' value="Женский" name='sex'>
          <span class='woman'><img alt="Ж" class="picSex" src="@/components/UI/pics/FemaleSex.svg"></span>
        </label>
        <label>
          <input class="inpSex" type='radio' value="Мужской" name='sex'>
          <span class='man'><img alt="М" class="picSex" src="@/components/UI/pics/MaleSex.svg"></span>
        </label>
      </div>
    </div>
    <MyButton class="btnAdd" @click="addNewPlayer">Добавить</MyButton>
  </div>
</template>

<script>
import InputText from "@/components/UI/InputText.vue";
import MyButton from "@/components/UI/MyButton.vue";

export default {
  name: "MyPopUp",
  components: {MyButton, InputText},
  methods: {
    closePopup() {
      this.$emit('closePopup');
    },
    addNewPlayer() {
      this.$emit('addNewPlayer', this.userName, this.userAge)
    }
  }
}
</script>

<style scoped>
.v-popup {
  background: #FFFFFF;
  box-shadow: 3px 6px 24px rgba(44, 57, 121, 0.09);
  border-radius: 1em;
}

.nameTag {
  font-weight: 700;
  font-size: 1.5em;
  line-height: 150%;
  margin-top: 2em;
}

.text {
  font-weight: 500;
  font-size: 1em;
  line-height: 1.5em;
  margin-bottom: 0.5em;
}

.nickname {
  display: flex;
  flex-direction: column;
}

.lowBlock {
  display: flex;
  flex-direction: row;
  margin-top: 3%;
}

.age {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.age .text, .sex .text {
  text-align: left;
}

.sex .text {
  margin-left: 7.5%;
}

.age .inp {
  width: 35%;
}

.inpSex {
  display: none;
}

span {
  display: inline-block;
  width: 48px;
  height: 48px;
  border: 1px solid #DCDCDF;
  margin: 5px;
  font-size: 40px;
  line-height: 50px;
  text-align: center;
  border-radius: 1000px;
  opacity: 0.7;
}

.sex input:hover ~ span {
  border: 1px solid #60C2AA;
  opacity: 1;
}

.sex input:checked ~ span {
  border: 1px solid #60C2AA;
  background-color: #60C2AA;
  opacity: 1;
}

.picSex {
  width: 2em;
  height: 2em;
}

.btnAdd {
  margin-top: 3%;
}
</style>`

parent-element的程式码范例：

`<template>
  <div class="wrapper">
    <MyNavbar style="width: 100%;"></MyNavbar>
    <div class="screen">
      <MyPopUp @addNewPlayer="addNewPlayerInConsole" class="Popup" @closePopup="closePopupInfo" v-if="isPopupVisible"></MyPopUp>
      <div class="block">
        <div class="top-of-table">
          <div class="table-naming">
            Список игроков
          </div>
          <MyButton @click="showPopupInfo()" @closePopup="closePopupInfo()">Добавить игрока</MyButton>
        </div>
        <div class="table">
          <MySpreadsheet class="spreadSheet">
            <thead>
            <tr>
              <th class="row">ФИО</th>
              <th class="row">Возраст</th>
              <th class="row">Пол</th>
              <th class="row">Статус</th>
              <th class="row">Создан</th>
              <th class="row">Изменён</th>
              <th class="row"></th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="player in playersData" :key="player.ID">
              <td class="row">{{ player.PlayerName }}</td>
              <td class="row">{{ player.Age }}</td>
              <td class="row"><img alt="Мужской" class="sex" src="@/components/UI/pics/MaleSex.svg"
                                   v-if="player.Sex === 'Мужской'">
                <img alt="Женский" class="sex" src="@/components/UI/pics/FemaleSex.svg" v-if="player.Sex === 'Женский'">
              </td>
              <td class="row">
                <MyStatus class="M"
                          :class="{'Free': player.Status==='Активен', 'Blocked': player.Status ==='Заблокирован'}"
                          style="width: 70%; padding: 0.25em 0.75em">
                  {{ player.Status }}
                </MyStatus>
              </td>
              <td class="row">{{ player.DateOfCreate }}</td>
              <td class="row">{{ player.DateOfEdit }}</td>
              <td class="row">
                <MyButton class="Secondary MSmall" v-if="player.Status === 'Активен'">
                  <img alt="Ø" class="blockImg" src="@/components/UI/pics/Stop.svg"> Заблокировать
                </MyButton>
                <MyButton class="Secondary MSmall" v-if="player.Status === 'Заблокирован'">
                  Разблокировать
                </MyButton>
              </td>
            </tr>
            </tbody>
          </MySpreadsheet>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MyNavbar from "@/components/UI/MyNavbar";
import MySpreadsheet from "@/components/UI/MySpreadsheet";
import MyStatus from "@/components/UI/MyStatus";
import MyButton from "@/components/UI/MyButton.vue";
import MyPopUp from "@/components/UI/MyPopUp.vue";

export default {
  name: "SessionsPage",
  components: {MyButton, MyStatus, MySpreadsheet, MyNavbar, MyPopUp},
  data() {
    return {
      isPopupVisible: false,
      playersData: [
        {
          ID: '1',
          PlayerName: 'Александров Игнат Анатолиевич',
          Age: '24',
          Sex: 'Женский',
          Status: 'Заблокирован',
          DateOfCreate: '12 октября 2021',
          DateOfEdit: '22 октября 2021'
        },
        {
          ID: '2',
          PlayerName: 'Мартынов Остап Фёдорович',
          Age: '12',
          Sex: 'Женский',
          Status: 'Активен',
          DateOfCreate: '12 октября 2021',
          DateOfEdit: '22 октября 2021'
        },
        {
          ID: '3',
          PlayerName: 'Комаров Цефас Александрович',
          Age: '83',
          Sex: 'Мужской',
          Status: 'Активен',
          DateOfCreate: '12 октября 2021',
          DateOfEdit: '22 октября 2021'
        }]
    }
  },
  methods: {
    showPopupInfo() {
      this.isPopupVisible = true;
    },
    closePopupInfo() {
      this.isPopupVisible = false;
    },
    addNewPlayerInConsole() {
    }
  }
}
</script>

<style scoped>
.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.screen {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.block {
  background: #ffffff;
  width: 48.5%;
  height: 90%;
  box-shadow: 0 4px 20px rgba(44, 57, 121, 0.09);
  border-radius: 40px;
  padding-left: 2.5%;
  padding-right: 2.5%;
}

.top-of-table {
  display: flex;
  justify-content: space-between;
  margin-top: 4%;
}

.table-naming {
  line-height: 200%;
  font-weight: 700;
  font-size: 1.5em;
  text-align: left;
}

td, th {
  padding-top: 1.5%;
  padding-bottom: 1.5%;
}

th {
  padding-top: 2.5%;
}

.row {
  text-align: left;
}

tr {
  box-shadow: inset 0 -1px 0 #EEEFF5;
}

.Popup {
  padding: 1.5em;
  position: fixed;
  top: 35%;
  left: 37.5%;
  width: 20%;
}
</style>`

如果你有什么想法，请帮忙把子元素中的输入数据添加到父元素中的数据中，我将非常感激。

2条答案

按热度按时间

bcs8qyzn1#

我建议在子（MyPopUp）组件中使用v-model方法。
它是一个很好的工具，使用它可以轻松地存储来自不同表单输入（如input、textarea等）的数据，也可以为自定义组件实现，以在整个项目中保持通用语法。
1.在MyPopUp中，您将使用它添加从输入获取数据

<input v-model="userName" class="inp" type="text" placeholder="Иванов Иван Иванович" />

我使用HTML输入元素来展示v-model。考虑到MyInput是一个自定义元素，你需要使用它来实现它的行为。
1.我们需要为v模型定义数据变量，以便将输入数据发送到其中。然后，我们将在addNewPlayer emit中向上传递数据。PS：此代码假定为vue 3。

export default {
  data() {
    return {
      // This will keep the data reactive coming from input text
      userName: '',
      userAge: ''
    }
  }

  methods: {
    addNewPlayer() {
      this.$emit('addNewPlayer', { name: this.userName, age: this.userAge });
    }
  }
}

赞(0）回复(0）举报 2022-12-14

f87krz0w2#

在addNewPlayerInConsole（）方法中，您可以获取数据并将其设置为父数据，如下所示：

addNewPlayerInConsole(_payload) {
  this.parentCompName = _payload.name;
  this.parentCompAge = _payload.age;
}

在数据对象中：

data() { 
 return {
  parentCompNmae: '',
  parentCompAge: '',
 }
}

如何将Input中的数据添加到Vue.JS中的Data？

2条答案

相关问题

热门标签

最新问答