Question

问题很简单：我有一个带有setter和getter的计算属性。它返回一个数据属性，但只有在满足某些条件的情况下，我才想设置该值。在可以找到here的示例中，我仅在一年中大于或小于一年的情况下设置值。
例如：如果您在第一个组合框中设置的值大于第二个组合框中的值，则由于没有设置变量，但您希望看到该属性已更新，因此我预计不会进行任何更新。关于如何解决这个问题有什么建议吗？

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正确值的问题。

如果希望视图反映这些内部值，则应为Comobobox提供https://jsfiddle.net/jkyg40hm/并更新设置器中的键。当您希望Vue反映内部状态时，这将为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>

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

keys

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

1 个答案: