Push данных в двумерных массив?

Question

Как мне правильно пушать (name, topic, days) в массив studentIndex: [] Cпасибо!)

new Vue({
		el: "#data-tag",
		data: {
			dataend: '',
			days: '',
			studentIndex: [
				{nameStudentIndex:"", topicStudentIndex: "", days: ""},
			]
		},
		watch: {
			dataend(){
				this.deadline();
			}
		},
		methods: {
			deadline() {
				const msPerDay = 8.64 * Math.pow(10, 7);
				const abs = Date.parse(this.dataend) - Date.now();
				this.days = Math.ceil(abs/msPerDay);
			},
			addtoList() {
				studentIndex.push(this.nameStudentIndex, this.topicStudentIndex, this.days);
				console.log(studentIndex);
			}

		},
		computed: {
			сolorTag() {
       		switch(true) {
            case this.days > 60: {
              return 'blue'
            }
            case this.days < 60 && this.days>14: {
              return 'yellow'
            }
            case this.days < 14: {
              return 'red'
            }
            }
			}
		}	
	})

tab {
			width: 140px;
			height: 80px;
			
		}
		.red {background-color: red;}
		.yellow {background-color: yellow;}
		.blue {background-color: blue;}
		#rezult {
			background-color: #eee;
		}

<div id="data-tag">
	<input type="text" placeholder="name" v-model="nameStudentIndex">
	<input type="text" placeholder="topic" v-model="topicStudentIndex">
	<input type="date" placeholder="дата окончания" v-model="dataend">
	<button @click="addtoList">Add</button>
	

	<div id="rezult" v-for="studentIndexes in studentIndex">
		<div>{{studentIndexes.nameStudentIndex}}</div>
		<div>{{studentIndexes.nameStudentIndex}}</div>
		<div> {{studentIndexes.days}} days</div>
		<div :class="`tab ${сolorTag}`"></div>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Answer 1

Cоздать объект в объекте data:

newStudent: {}

к соответствующим полям формы добавить v-model

<input type="text" placeholder="name" v-model="newStudent.nameStudentIndex">
<input type="text" placeholder="topic" v-model="newStudent.topicStudentIndex">

Свойство days у вас формируется по событию выбора даты, вешаем на него обработчик.

<input type="date" placeholder="дата окончания" @change="deadline" v-model="dataend">

Это позволит запустить функцию deadline после выбора даты. В теле которой, после вычислений, результат передаем свойству days объекта newStudent

this.newStudent.days = Math.ceil(abs / msPerDay);

После заполнения всех полей у вас будет объект newStudent с необходимыми свойствами

{ "nameStudentIndex": "asdsdasd", "topicStudentIndex": "asdasd", "days": 34 }

и вы можете его "запушить" в массив

Для наглядности привожу пример.

new Vue({
  el: "#data-tag",
  data: {
    dataend: '',
    days: '',
    newStudent: {},
    studentIndex: [{
        nameStudentIndex: 'name test',
        topicStudentIndex: 'topic test',
        days: 50
      },
      {
        nameStudentIndex: 'name test',
        topicStudentIndex: 'topic test',
        days: 13
      }
    ]
  },
  methods: {
    deadline() {
      const msPerDay = 8.64 * Math.pow(10, 7);
      const abs = Date.parse(this.dataend) - Date.now();
      this.newStudent.days = Math.ceil(abs / msPerDay);
    },
    addtoList() {
      this.studentIndex.push(this.newStudent);
      this.dataend = 0;
      Vue.set(this, 'newStudent', {});
    }
  },
  computed: {
    
    сolorTag() {
      return (days) => {
        switch (true) {
          case days > 60:
            {
              return 'blue'
            }
          case days < 60 && days > 14:
            {
              return 'yellow'
            }
          case days < 14:
            {
              return 'red'
            }
        }
      }
    }
  }
})

.tab {
  height: 100%;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.box {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background-color: #eee;
}

.box>div {
  padding: 5px;
  margin: 5px;
  flex: 1 1 auto;
}

<div id="data-tag">
  <input type="text" placeholder="name" v-model="newStudent.nameStudentIndex">
  <input type="text" placeholder="topic" v-model="newStudent.topicStudentIndex">
  <input type="date" placeholder="дата окончания" @change="deadline" v-model="dataend">
  <button @click="addtoList">Add</button>
  <pre>{{ newStudent }}</pre>
  <div id="rezult" v-for="(studentIndexes, index) in studentIndex" :key="index">
    <div class="box">
      <div>{{studentIndexes.nameStudentIndex}}</div>
      <div>{{studentIndexes.nameStudentIndex}}</div>
      <div> {{studentIndexes.days}} days</div>
      <div class="tab" :class="[сolorTag(studentIndexes.days)]"></div>
    </div>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>

БЛОГ НА HUSL

Push данных в двумерных массив?

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