Не обновляйте привязку значения массива к полю ввода внутри компонента vue

Question

Здесь я правильно отображаю данные внутри компонента. Но всякий раз, когда я изменяю любое входное значение, которое не обновляется в массиве, который нужно связать. Я не могу двухстороннее связывание значений с массивом rows. Пожалуйста помоги. Заранее спасибо.

Vue.component('refund-table', {
  template: `
      <div> 
          <div class="table-responsive">
                  <table class="table table-bordered table-hover table-striped">
                  <thead>
                      <tr>
                          <th v-for="column in columns"> {{column}}</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="(row,index) in rows">
                          <td >#{{index+1}}</td>
                          <td v-for="(item,ind) in row">
                              <input v-if="ind>0" :value="item">
                              <div v-else>{{item}}</div>
                          </td>
                      </tr>
                  </tbody>
                  <tfoot>
                      <tr>
                          <td></td><td></td><td style="text-align: right">Total</td><td>{{totalRefund}}</td>
                      </tr>
                  </tfoot>
              </table>
              </div>
      </div>
      `,
  props: {
    columns: Array,
    rows: Array,
    caption: String,
    edit: Boolean,
  },
  data() {
    return {}
  },

  mounted() {},
  methods: {},
  computed: {
    totalRefund: function() {
      return 100;
    }
  }
})

new Vue({
  el: "#app",
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<refund-table id="app" :columns='["#Serial","a","b","c"]' :rows="[[1,2,3],[1,2,3],[1,2,3],[1,2,3]]" :footer='["a","b","c"]'></refund-table>

Answer 1

Используйте v-модель, приведенную ниже, чтобы связать вновь введенные данные и записать функцию updateArrayData в вычисленные значения, поэтому при любых изменениях она будет возвращать вновь добавленное значение в ваш массив.

Vue.component('refund-table', {
  template: `
      <div> 
          <div class="table-responsive">
                  <table class="table table-bordered table-hover table-striped">
                  <thead>
                      <tr>
                          <th v-for="column in columns"> {{column}}</th>
                      </tr>
                  </thead>
                  <tbody>
                      <tr v-for="(row,index) in rows">
                          <td >#{{index+1}}</td>
                          <td v-for="(item,ind) in row">
                 <input @input="updateArrayData(row, index)" v-model="input_data" v-if="ind>0" :value="item">
                              <div v-else>{{item}}</div>
                          </td>
                      </tr>
                  </tbody>
                  <tfoot>
                      <tr>
                          <td></td><td></td><td style="text-align: right">Total</td><td>{{totalRefund}}</td>
                      </tr>
                  </tfoot>
              </table>
              </div>
      </div>
      `,
  props: {
    columns: Array,
    rows: Array,
    caption: String,
    edit: Boolean,
  },
  data() {
    return {
        input_data:''          // Add the input_data variable in your data
    }
  },

  mounted() {},
  methods: {},
  computed: {
    totalRefund: function() {
      return 100;
    },
    // Add the updateArrayData function in your computed here.
    updateArrayData: function(row, index){  
        if(input_data){
            return row[index] = this.input_data;
        }
    }
  }
})

new Vue({
  el: "#app",
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<refund-table id="app" :columns='["#Serial","a","b","c"]' :rows="[[1,2,3],[1,2,3],[1,2,3],[1,2,3]]" :footer='["a","b","c"]'></refund-table>