vue-treeselect值改变时，如何添加确认判断逻辑？

Question

项目中使用到了vue-treeselect组件，有一个场景需要“当vue-treeselect选中的值改变（减少）时，需要提供用户确认框，如果用户确认，才改变，否则不改变”，该如何实现？

注意：不方便使用监听vue-treeselect绑定的值，因为有一些逻辑会通过代码修改该值，这种场景提示用户是否确认改变会有点奇怪。

Answer 1

不通过 v-model 进行双向绑定，改成使用 v-bind:value 传入已选的值。通过监听 @update:value 事件手动去修改绑定的 value 值。

<VTreeselect :data="data" :value="selectItem" value-field-name="id"  @update:value="handleUpdate" />

Answer 2

可以使用 @input 事件来捕捉用户的选择变化。具体实现步骤如下：

1. 捕捉 vue-treeselect 的 @input 事件：通过 @input 事件来捕捉用户选择的变化。
2. 弹出确认框：在捕捉到值变化时弹出确认框，确认后才改变值。
3. 处理代码更新值的逻辑：通过标识符来区分用户操作和代码修改，避免代码修改时也弹出确认框。

Template 部分

<template>
  <div>
    <vue-treeselect
      v-model="selectedValue"
      :multiple="true"
      :options="options"
      @input="handleInput"
    ></vue-treeselect>
  </div>
</template>

Script 部分

<script>
import Vue from 'vue';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

export default {
  components: {
    Treeselect,
  },
  data() {
    return {
      selectedValue: [],
      previousValue: [],
      options: [
        { id: 'a', label: 'Option A' },
        { id: 'b', label: 'Option B' },
        { id: 'c', label: 'Option C' },
      ],
      isProgrammaticChange: false, // 标识是否是代码修改
    };
  },
  watch: {
    selectedValue(newValue, oldValue) {
      // 记录用户手动修改之前的值
      if (!this.isProgrammaticChange) {
        this.previousValue = oldValue;
      }
    },
  },
  methods: {
    handleInput(value) {
      if (this.isProgrammaticChange) {
        // 如果是代码修改，不处理用户确认逻辑
        this.isProgrammaticChange = false;
        return;
      }

      // 检查是否是减少选择
      if (value.length < this.previousValue.length) {
        // 弹出确认框
        if (confirm('确定要移除选中的项吗？')) {
          this.previousValue = value;
        } else {
          // 恢复之前的值
          this.isProgrammaticChange = true;
          this.selectedValue = this.previousValue;
        }
      } else {
        // 更新 previousValue
        this.previousValue = value;
      }
    },
    // 示例方法，通过代码修改 selectedValue
    updateSelectedValue(newValue) {
      this.isProgrammaticChange = true;
      this.selectedValue = newValue;
    },
  },
};
</script>