У меня есть шесть блоков, в двух есть информация, в четырех ее нету, сверху есть input в который можно ввести информацию и нажавши на иконку введенная информация будет пушиться , но у меня просто создается блок новый, то есть седьмой, не могу понять как сделать так, чтобы допустим информация шла в третий блок, ввел еще раз информацию, она шла в четвертый и тд ?
const app = new Vue({
el: '#app',
data() {
return {
addpepleofhouse: '',
loaves: [
{name: 'Kastyn', lname: 'L.', passport: 1414234234},
{name: 'Tupe', lname: 'F.', passport: 231223434},
{empty: true},
{empty: true},
{empty: true},
{empty: true},
],
}
},
methods: {
Massageforpeople() {
this.addinput = false;
this.tempaddpeople = true;
setTimeout(() => {
this.addpeople = true;
this.tempaddpeople = false;
}, 2000);
this.loaves.push({
passport: this.addpepleofhouse
})
}
},
});
.people__slots {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 924px;
height: 212px;
}
.people__item {
width: 300px;
height: 100px;
background: lightblue;
border-radius: 24px;
margin-bottom: 12px;
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class="" id="app">
<input type="text" v-model="addpepleofhouse" class="peoplehouseadd" placeholder="Паспорт">
<img src="./img/plus_icon.svg" class="peopleaddimg" @click="Massageforpeople()">
<div class="people__slots">
<div class="people__item" v-for="(loave, index) in loaves">
<div v-if="!loave.empty" class="people__item-pasport">{{loave.passport}}</div>
<div class="item__blokc" v-if="loave.empty">
Пусто
</div>
</div>
</div>
</div>