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

Question

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

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

Answer 1

可以使用 @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>

Answer 2

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

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