Vue2：为什么在使用计算 属性 时不能设置新值？

Question

我有一个来自 API (romanizationSystem_FK) 的 属性，有时它是一个 null 值。如果有一个空值，我想把那个 属性 的值设置为 -1.

我已经尝试通过计算的 属性 来执行此逻辑，但由于某种原因，如果值为 null，它仍然不会被计算的设置为 -1 属性。有人发现任何错误吗？

Template:

        <select
          v-model="romanizationSystem_FK"
          @change="$emit('variation-updates', formValues)"
        >
          <option value=""></option>
          <option
            v-for="option in romanizationSystemOptions"
            :key="option.code"
            :value="option.code"
          >
            {{ option.system }}
          </option>
        </select>

脚本：

props: {
    variation: {
      type: Object,
      default: () => ({})
    },
    romanizationSystemOptions: {
      type: Array,
      default: () => []
    },
  data() {
    return {
      formValues: {
        ...this.variation
      }
    }
  },
  computed: {
    romanizationSystem_FK: {
      get() {
        return this.formValues.romanizationSystem_FK
      },
      set(val) {
        if (val === null) {
          this.formValues.romanizationSystem_FK = -1
        } else {
          this.formValues.romanizationSystem_FK = val
        }
      }
    }

Answer 1

您可以使用 Nullish coalescing operator (??)。我只是创建一个非常简单的演示来展示它是如何工作的。

new Vue({
  el: '#app',
  data: {
    formValues: {
      romanizationSystem_FK: null
    }
  },
  computed: {
    romanizationSystem_FK() {
      return this.formValues.romanizationSystem_FK ?? '-1'
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input v-model="romanizationSystem_FK"/>
</div>