arrays - 计算设置器不适用于 v-for 循环内的 v-model

Question

我有一个包含多个输入字段的数组，其中 v-model 在 v-for 循环内。每个数组项的其中一个字段包含价格。在对象中，此价格应以美分为单位，但在输入字段中应以整欧元为单位。

我创建了一个计算属性，基本上将（getter）和多个（setter）价格除以 100。getter 工作正常，但 setter 似乎没有做任何事情。

这是我的（简化的）代码：

<template>
  <div>
    <div v-for="(item, index) in geleverd" :key="index">
      <div>
        <label for="Omschrijving">Omschrijving</label>
        <input v-model="item.naam" type="text" name="Omschrijving">
      </div>
      <div>
        <label for="Aantal">Aantal</label>
        <input
          v-model="item.aantal"
          type="number"
          name="Aantal"
          min="0"
          step="1"
        >
      </div>
      <div>
        <label for="Prijs">Prijs</label>
        <input
          v-model="item.prijs"
          type="number"
          name="Prijs"
          min="0"
          step=".50"
        >
      </div>
      <div>
        <label for="Btw">Btw</label>
        <input
          v-model="item.btw"
          type="number"
          name="Btw"
          min="0"
          step="1"
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    factuur () {
      const foundFactuur = this.$store.state.facturen.list.find((factuur) => {
        return factuur.info.id === this.$route.params.factuur
      })
      if (foundFactuur) {
        return JSON.parse(JSON.stringify(foundFactuur))
      } else {
        return JSON.parse(JSON.stringify(this.$store.state.facturen.empty))
      }
    },
    geleverd: {
      get () {
        return this.factuur.geleverd.map((item) => {
          const newPrijs = (item.prijs / 100).toFixed(2)
          return {
            aantal: item.aantal,
            naam: item.naam,
            prijs: newPrijs,
            btw: item.btw
          }
        })
      },
      set (newArray) {
        const newGeleverd = newArray.map((item) => {
          const newPrijs = (item.prijs * 100).toFixed(0)
          return {
            aantal: item.aantal,
            naam: item.naam,
            prijs: newPrijs,
            btw: item.btw
          }
        })
        this.factuur.geleverd = newGeleverd
      }
    }
  }
}
</script>

我的代码有问题吗，或者这在 Vue 中是不可能的？

我知道我可能可以通过使用称为@input 的方法来实现我的目标，但是计算属性似乎更适合我。

我真的不喜欢为整个对象设置计算属性，因为我只需要修改一项。有什么办法可以解决这个问题？

标签： arraysvue.jsv-forcomputed-propertiesv-model