一个Vue中 困扰了很久的问题,请教大家有没办法在编辑时,暂停计算属性

Question

cell_attr.value = computed(() => {
                        return cellBlurCheck(cell_attr, cell_attr.proto)
                    })  <input  :value=cell_attr.value />  有没办法在编辑时,暂停计算属性

Answer 1

在 Vue 中，计算属性是根据其依赖的响应式数据来实时计算的。如果你想在编辑输入框时暂停计算属性的计算，可以使用 v-model 指令结合 @input 事件来手动控制计算属性的更新。

首先，修改输入框的绑定，使用 v-model 来实现双向数据绑定，并在 @input 事件中触发一个方法：

<input v-model="inputValue" @input="handleInput" />

接下来，在 Vue 实例中定义 inputValue 和计算属性，并创建一个标志位来控制计算属性的计算：

data() {
  return {
    inputValue: '',
    shouldCompute: true,
    computedValue: ''
  };
},
computed: {
  cellAttrValue() {
    if (this.shouldCompute) {
      return this.cellBlurCheck(this.inputValue, this.cell_attr.proto);
    } else {
      return this.inputValue;
    }
  }
},
methods: {
  handleInput(event) {
    this.shouldCompute = false; // 暂停计算属性的计算
    this.inputValue = event.target.value; // 更新输入框的值
    // 其他逻辑处理...
  },
  cellBlurCheck(value, proto) {
    // 执行计算属性的计算逻辑
    // 返回计算结果
  }
}

在上述代码中，我们通过 handleInput 方法来处理输入框的输入事件。在该方法中，我们将 shouldCompute 标志位设置为 false，以暂停计算属性的计算。然后，更新输入框的值。

在计算属性 cellAttrValue 中，我们根据 shouldCompute 的值来决定返回计算属性的计算结果还是输入框的值。

这样，当你编辑输入框时，计算属性的计算会被暂停，直到你需要重新开始计算。

希望这个方法能够解决你的问题。