在行Vue.js中动态添加或删除输入

Question

我正在尝试单击“插入新课程”时动态添加和删除行，以及单击“在行中插入另一所大学”时添加和删除输入。我可以添加和删除行，但是当我单击“插入另一所大学”时，我无法在1行之前添加行。我正在使用vuejs。

我的代码是：

<template>

  <div class="container">

    <div class="card">

      <div class="card-header text-center"> FORM</div>

      <div class="card-body">

        <div class="col-md-12">

          <form v-on:submit.prevent="onSubmit">

            <div class="container-fixed border border-dark" style="padding-top:10px">

             <div class="form-group row mt-5" v-for="(row,k) in rows" :key="k"> //ROWS

                 <label class="col-sm-4 col-lg-1 mt-3 col-form-label font-weight-bold ">Course:</label>

                 <div class="col-xs-8 col-sm-6 col-lg-3 mt-3 border border-dark" >

                     <div class="row"><!--v-for="(course,k) in courses" :key="k"-->

                     <input  type="text"  class="form-control border-primary" v-model="rows.courses" required>

                     <div class="col">

                         <div class="row">

                     <a href="#" @click="removeCourse(k)" v-show="k || (!k && rows.length > 1)" style="color:red" >Remove course</a> //onClick remove row

                     <a href="#" @click="addCourse(k)" v-show="k == rows.length-1" style="color:#152266">Insert another course</a> //onClick add row

                         </div>

                     </div>

                 </div>

             </div>

             <label class="col-sm-4 col-lg-1 mt-3 col-form-label font-weight-bold ">Universities:</label>

             <div class="col-xs-8 col-sm-6 col-lg-4 mt-3 border border-dark" >

                     <div class="row" v-for="(university,u) in row.universities" :key="u">

                     <input  type="text"  class="form-control border-primary" v-model="university.name" required>

                     <div class="col">

                         <div class="row">

                             <a href="#" @click="removeUniversity(u)" v-show="u || (!u && row.universities.length > 1)" style="color:red">Remove University</a> //onClick remove input

                             <a href="#" @click="addUniversity(u)" v-show="u == row.universities.length - 1" style="color:#152266"> Insert another University</a> //onClick add input 

                             </div>

                             </div>

                 </div>

             </div>

             <label class="col-sm-4 col-lg-1 mt-3 col-form-label font-weight-bold ">Choose Faculty:</label>

             <div class="col-xs-8 col-sm-6 col-lg-3 mt-3 border border-dark">

                 <Multiselect v-model="rows.selecprof" :multiple="true" :options="professors"></Multiselect>

                 </div>

             </div>

            </div>

          </form>

        </div>

      </div>

    </div>

  </div>

</template>

<script>
import Multiselect from 'vue-multiselect';

export default {

  name: "form",

  props: ["app"],

  components: {
Multiselect

  },

  data() {

    return {
rows:[{

      courses:'',

      universities:[

          {

              name:'',

          }

      ]

      ,

      selecprof:null,

      }

    ],

      professors:[']
    };

  },

  methods: {

    addUniversity(index){

        this.rows[index].universities.push({name:''})

    },

    removeUniversity(index){

        this.rows[index].universities.splice(index,1);

    },  

    addCourse(index){

        this.rows.push({courses:"",universities:{name:''},selecprof:''});

        console.log(this.rows[1].universities);

    },

    removeCourse(index){

        this.rows.splice(index,2);

    },



    },



  }

};

</script>

图片： 我想做下面的事情，但是它不能正常工作。