Vuejs: Как связать содержимое моего массива - PullRequest
Новая
       10

Vuejs: Как связать содержимое моего массива

0 голосов
/ 27 февраля 2020

Я создаю таблицу, в которую я могу вставить строку или числа в мою таблицу, и я использую contenteditable, чтобы вставить значение в мой массив вместо элемента ввода. Как мне это сделать? 

//template
   <button @click="addTd" class="btn btn-block">+</button>

   <td v-for="(addCol,i) in addCols"  :key="i" class="text-center addCols"  
     contenteditable="true" @input="edit"></td>

method: {

     addTd: function() { 
            this.addCols.push({ addColsFG: [] });
        },

     edit(evt){
        var src = evt.target.innerHTML
        //code here
         },

enter image description here enter image description here

Как я могу отправить свой значение до addColsFG? 

var app = new Vue({
  el: '#app',
  data: {
    addCols:[],
    students: [
      {name:	"s1"},
       {name:	"s2"},
       {name:	"s3"},
    ]
  },
  methods:{
   addTd: function() { 
            this.addCols.push({ addColsFG: [] });
        },
    edit(evt){
            var src = evt.target.innerHTML
              this.addCols.forEach((e,i) => {
                console.log(i);
              
            });
           
         },
         }
})
.addCols{
width:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table border="1">
          <thead>
              <tr>
                <td colspan="4">
                </td>
                <td colspan="2">
                  <button @click="addTd" class="btn btn-block btn-primary">add</button>
                </td>

              </tr>
            <!-- <tr>
              <th scope="col">#</th>
              <th scope="col" >Name</th>
              <th scope="col">ID Number</th>
              <th scope="col">Course</th>
              <th></th>
            </tr> -->
          </thead>
          <tbody >
            <tr v-for="(student,index) in students" :key="index" >
              <td>{{index+1}}</td>
              <td> {{student.name}}</td>
             
              <td v-for="(addCol,i) in addCols"  :key="i" class="text-center addCols"  contenteditable="true" @input="edit"></td>
            </tr>
          </tbody> 
        </table>
</div>
...