Vue-multiselect多选组件选中值异常及AJAX提交JSON数据问题咨询

问题1解答 #

原因：你绑定的@select事件本身的设计回调参数不是全部已选中的数组，而是本次触发选中操作对应的单个元素（如果是选中整个分组则返回分组下的所有元素数组）。
当你首次选中单个子选项时，回调拿到的value是单个选项对象，对象本身没有length属性，所以value.length > 0判断不成立，queryData没有被赋值，所以控制台打印的是初始值。而v-model绑定的selectedcategoryitem是由组件内部维护的完整选中列表，已经同步更新了选中项，所以长度为1。
你多选或者选中分组的时候，返回的value是数组，所以判断成立，可以正常赋值。

问题2解答 #

第一步：修正事件绑定 #

不需要用@select事件，直接监听@input事件即可，@input事件的回调参数就是组件最新的完整选中列表，和selectedcategoryitem的值完全同步：

<multiselect 
  v-model="selectedcategoryitem"
  :options="options"
  :multiple="true"
  :internal-search="false"
  group-values="libs"
  group-label="category"
  :group-select="true"
  placeholder="Type to search"
  track-by="value"
  label="name"
  @input="toggleSelected"
>
  <span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
</multiselect>

第二步：修正请求传参逻辑 #

直接用已经同步更新的selectedcategoryitem做序列化即可，不需要额外用queryData中转：

toggleSelected: function () {
  // 直接用v-model绑定的selectedcategoryitem，不需要依赖事件参数
  console.log(this.selectedcategoryitem);
  // 转JSON字符串传给后端
  const postData = JSON.stringify(this.selectedcategoryitem)
  this.UpdateType(this.selectGoalID, postData).then(
    function (result) {
      if (result.code == "S") {
        // 成功逻辑
      } else {
        alertResultModel(result);
      }
    },
    function () {
      alertError("Error!!");
    }
  );
}

另外注意你贴出的data代码有语法错误：options数组最后一个元素结尾多了一个多余的}，需要先修正语法问题避免响应式异常。
如果后端需要的是纯值数组而非完整对象，可以遍历selectedcategoryitem提取需要的字段再序列化，比如只取value字段：

const postData = JSON.stringify(this.selectedcategoryitem.map(item => item.value))

内容的提问来源于stack exchange，提问作者Thomas Lin