vue.js - 如果不满足条件，如何在 set 函数中不设置计算变量值

Question

问题很简单：我有一个带有 setter 和 getter 的计算属性。它返回一个数据属性，但我只想在满足某些条件的情况下设置该值。在您可以在此处找到的示例中，我仅在一年大于或小于另一年时设置值。
例如：如果您将第一个组合框中的值设置为大于第二个组合框中的值，我应该不会更新，因为我没有设置变量，但是如您所见，属性已更新。关于如何解决这个问题的任何建议？

Answer 1

在您的设置器中，您使用存储的值而不是新值进行比较。所以，而不是这个..

// selectedYearAfter
set(selectedYearAfter) {
        if (this.selectedYearBefore < this.selectedYearAfter) {
                // do stuff
        } else {
               // should set nothing
        }
}

你应该做这个 ..

// selectedYearAfter
set(newValue) {
        if (this.selectedYearBefore < newValue) {
                // do stuff
        } else {
               // should set nothing
        }
}

这应该可以解决获取 和 的正确值的selectedYearBefore问题selectedYearAfter。

如果您希望视图反映这些内部值，您应该为您的组合框提供键并更新您的设置器中的键。这将为 Vue 在您希望它反映内部状态时更新视图提供提示。

<b-field>
  <b-select :key="comboBoxKeys.key1" v-model="selectedYearBefore">
    <option v-for="year in years" :key="`${ year }-after`" :value="year">{{ year }}</option>
  </b-select>
</b-field>
<b-field>
  <b-select :key="comboBoxKeys.key2" v-model="selectedYearAfter">
    <option v-for="year in years" :key="`${ year }-after`" :value="year">{{ year }}</option>
  </b-select>
</b-field>

下面的示例代码..

export default {
  name: "App",
  data() {
    return {
      selectedYearBefore_: 2008,
      selectedYearAfter_: 2010,
      comboBoxKeys: {
        key1: this.getKey(),
        key2: this.getKey()
      },
      years: [
        1994,
        1998,
        2000,
        2002,
        2004,
        2006,
        2008,
        2010,
        2012,
        2014,
        2016,
        2018,
        2020
      ]
    };
  },
  methods: {
    getKey() {
      return Date.now();
    }
  },
  computed: {
    selectedYearAfter: {
      get() {
        return this.selectedYearAfter_;
      },
      set(newValue) {
        if (this.selectedYearBefore < newValue) {
          this.selectedYearAfter_ = newValue;
        } else {
          console.log("Should set nothing");
          this.comboBoxKeys.key2 = this.getKey();
        }
      }
    },
    selectedYearBefore: {
      get() {
        return this.selectedYearBefore_;
      },
      set(newValue) {
        if (newValue < this.selectedYearAfter) {
          this.selectedYearBefore_ = newValue;
        } else {
          console.log("Should set nothing");
          this.comboBoxKeys.key1 = this.getKey();
        }
      }
    }
  }
};

<template>
  <section>
    <b-field>
      <b-select :key="comboBoxKeys.key1" v-model="selectedYearBefore">
        <option v-for="year in years" :key="`${ year }-after`" :value="year">{{ year }}</option>
      </b-select>
    </b-field>
    <b-field>
      <b-select :key="comboBoxKeys.key2" v-model="selectedYearAfter">
        <option v-for="year in years" :key="`${ year }-after`" :value="year">{{ year }}</option>
      </b-select>
    </b-field>
  </section>
</template>

我使用时间戳作为强制视图在需要时更新的键，但您可以使用任何您喜欢的值。