Question

我有一个data.frame(ID=c("ABC", "def", "ghi", "ABC", "jkl", "jkl"), Area=c( "area1", "area2", "area3", "area4", "area5", "area5"), AreaComb=c("area1 & area4", "area2", "area3", "area1 & area4", "area5", "area 5"))数组，其中包含一组对象。

使用单击+按钮动态添加这些对象。

然后将它们推入addRows数组；然后，用户填充这些对象。

每个对象都有许多输入值，例如价格和数量。

我需要在数量更改时更改价格，但问题是，如果以前添加了值，则返回的更改项为空。

之所以会这样，是因为新值是在旧值数组中之前添加的。

如图中的第三个值所示，第一个相同，因此该数组返回了第三个项目的空值

我尝试了foreach和for map，但是我遇到了同样的问题。

addRows

Answer 1

首先为每一行创建一个子组件
将每一行传递给组件
处理组件内部的单个对象，而不是处理父对象中的对象数组

请参见以下示例：

    Vue.component('child', {
  props: {
    value: { type: Object, default: () => ({}) }
  },
  data: function() {
    return {
      selfValue: null
    }
  },
  watch: {
    value: {
      handler(value) {
        this.selfValue = value
      },
      immediate: true,
      deep: true
    },
    selfVaue: {
      handler(value) {
        // you can also validate value then emit it
        this.$emit('input', value)
      },
      deep: true
    },
    'selfValue.quantity'() {
      this.selfValue.price = 0
    }
  },
  template: `
     <div class="d-flex justify-content-between">
        <label>
          Title:
          <input type="text" v-model="selfValue.title" class="form-control" />
        </label>
        <label>
          Quantity:
          <select v-model="selfValue.quantity" class="form-control">
            <option value="A">A</option>
            <option value="B">B</option>
          </select>
        </label>
        <label>
          Price:
          <input type="tel" v-model="selfValue.price" class="form-control" />
        </label>
     </div>
    `
})


new Vue({
  el: '#app',
  data: {
    rows: []
  },
  methods: {
    add() {
      this.rows.push({ title: '', quantity: '', price: 0 })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div id="app" class="container">
  <h2 class="mb-3">Rows:</h2>

  <div v-for="row,i in rows">
    <child v-model="row"></child>
    <hr class="mt-1 mb-1" />
  </div>
  
  <button @click="add" class="mb-3">
    ADD
  </button>
  
  <pre>{{ rows }}</pre>
  
</div>

如何从Vue.js中的对象数组跟踪更改后的值

1 个答案: