Не пушатся введенные данные в массив

Question

Когда я ввел данные , и нажимаю на добавить , данные не пушатся в массив, скорее всего ошибка в передачи данных

var app = new Vue({
  el: '#app',
  data() {
    return {
      items: [
        {id: 1, text: 'qqq'},
        {id: 2, text: 'www'},
        {id: 3, text: 'eee'},
        {id: 4, text: 'rrr'},
        {id: 5, text: 'fff'},
        {id: 6, text: 'ggg'},
        {id: 7, text: 'bbb'},
      ],
    }
  },
  methods: {
    addButton() {
      this.items.push({id: '', text: ''})
    }
  },
});

ul li {
  list-style: none;
}


.buttons {
   display: flex;
   justify-content: space-between;
   flex-direction: row;
   align-items: flex-start;

}
.buttonsall {
   display: flex;
   flex-direction: row;
   align-items: center;
   margin-right: get-vh(25px);
   padding: get-vh(4px) get-vh(6px) get-vh(4px) get-vh(4px);
   gap: get-vh(5px);
   background: rgba(0, 0, 0, 0.4);
   border-radius: get-vh(8px);
   height: get-vh(30px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <input type="text" v-model="items.id">
      <br>
      <input type="text" v-model="items.text">
      <br>
      <button @click="addButton">Добавить</button>
      <ul class="buttons">
         <li class="buttonsall"
         v-for="( item, index ) in items" 
         :key="item.id">
            <div class="buttons__text">{{ item.text }}</div>
         </li>
      </ul>
  </div>

Answer 1

Вы ничего не передаете, пушится пустое значение this.items.push({id: '', text: ''})

Вам нужно подставить данные из input

Пример:

var app = new Vue({
  el: '#app',
  data() {
    return {
      items: [{
          id: 1,
          text: 'qqq'
        },
        {
          id: 2,
          text: 'www'
        },
        {
          id: 3,
          text: 'eee'
        },
        {
          id: 4,
          text: 'rrr'
        },
        {
          id: 5,
          text: 'fff'
        },
        {
          id: 6,
          text: 'ggg'
        },
        {
          id: 7,
          text: 'bbb'
        },
      ],
    }
  },
  methods: {
    addButton() {

      this.items.push({
        id: this.items.id,
        text: this.items.text
      })
    }
  },
});

ul li {
  list-style: none;
}

.buttons {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
}

.buttonsall {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: get-vh(25px);
  padding: get-vh(4px) get-vh(6px) get-vh(4px) get-vh(4px);
  gap: get-vh(5px);
  background: rgba(0, 0, 0, 0.4);
  border-radius: get-vh(8px);
  height: get-vh(30px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="items.id">

  <br>
  <input type="text" v-model="items.text">

  <br>
  <button @click="addButton">Добавить</button>
  <ul class="buttons">
    <li class="buttonsall" v-for="( item, index ) in items" :key="item.id">
      <div class="buttons__text">{{item.id}} | {{ item.text }}</div>
    </li>
  </ul>
</div>

БЛОГ НА HUSL

Не пушатся введенные данные в массив

Ответы (1 шт):