How can I add data from my Input to Data in Vue.JS?

Question

I have a little problems with creating new users in my pet-project. MyInputs are getting values: userName and userAge. After this I tried to emits this to parent-element. And so, I need add it to playersData. Code example of child-element:

`<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>`

Code example of 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>`

If you have some ideas, please help to add data from input in child-element to data in parent-element. I would be very grateful.

Sarthak · Accepted Answer · 2022-12-05 12:32:10Z

I would suggest using v-model approach in the child (MyPopUp) component.

Its a great tool with which you can easily store data from different form inputs like input, textarea etc. and can also be implemented for custom components to keep a common syntax throughout your projects.

In MyPopUp you will use it to add get data from inputs

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

I am using HTML input element to showcase v-model. Considering MyInput is a custom element, you would need to implement the behaviour for it using this.

We will need to define the data variables for the v-model to send the input data into. Then we will just pass the data up in the addNewPlayer emit. PS: This code assumes vue3.

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 });
    }
  }
}

Sparko Sol · Accepted Answer · 2022-12-06 07:23:56Z

1

In addNewPlayerInConsole() method you can get data and set it to your parent data as like:

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

in Data Object:

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

answered Dec 6, 2022 at 7:23

Sparko Sol

7254 silver badges9 bronze badges

Collectives™ on Stack Overflow

How can I add data from my Input to Data in Vue.JS?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related