不要使用 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

Use a v-model here below to bind the newly inputted data and the write a function updateArrayData in the computed so whenever there is any change, it will return the newly added value in your array.

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>

不要使用 vue 组件内的输入字段更新数组值绑定

Do not update the array value bind with an input field inside vue component

vue.js

vue-component

2-way-object-databinding