主页 / 问题 / 1103074
Accepted
slobodianiukvitali
Asked:2020-03-31 03:54:31 +0000 UTC2020-03-31 03:54:31 +0000 UTC

将数据推入二维数组？

  • 772

如何正确地将（姓名、主题、日期）推送到 studentIndex：[] 谢谢！）

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>

vue.js

1 个回答

  1. Best Answer

    在对象中创建对象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>

    • 1

相关问题