0

У меня есть шесть блоков, в двух есть информация, в четырех ее нету, сверху есть 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>

1 ответ 1

1

Вам необходимо при добавлении проверять ваш массив на наличие элементов c ключом empty. Элемент найден, меняете, если нет, добавляете(ну или делаете другую логику, если допустим вам надо только 6 элементов)

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);
      let idx
      const find = this.loaves.find((item, index) => {
        if (item.hasOwnProperty('empty')) {
          idx = index;
          return true;
        }
      })
      if (find) {
        this.loaves[idx] = { passport: this.addpepleofhouse }
      } else {
        this.loaves.push({
          passport: this.addpepleofhouse
        })
      }
    }
  },
});

Отдельно стоит подумать над тем, что бы изначально сохранять индекс первого пустого элемента, что бы избегать перебора массива. А сам индекс увеличивать при изменении.

Я бы сделал так:

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},
      ],
      loavesIdx: 2,
    }
  },
  methods: {
    Massageforpeople() {
      this.addinput = false;
      this.tempaddpeople = true;
      setTimeout(() => {
        this.addpeople = true;
        this.tempaddpeople = false;
      }, 2000);
      
      if (this.loaves.length !== this.loavesIdx + 1) {
        this.loaves[this.loavesIdx] = { passport: this.addpepleofhouse }
      } else {
        this.loaves.push({
          passport: this.addpepleofhouse
        })
      }
      this.loavesIdx++;      
    }
  },
});
2
  • Когда я использовал первый варианта, я вписал цифры, нажал на картинку 5 раз, до этого в пустых блоках было пусто, после пуша 5-ого блока, у них пропал текст с "Пусто" и туда добавилась введенная информация
    – Young
    20 окт 2022 в 6:39
  • Вроде как вы именно этого поведения хотели достичь?
    – SwaD
    20 окт 2022 в 7:19

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.