search

riophae / vue-treeselect

A multi-select component with nested options support for Vue.js
https://vue-treeselect.js.org/
MIT License
2.89k stars 505 forks source link

在 vue2 环境中, multiple = true, 使用 demo 报错 #502

Open yangup opened 2 years ago

yangup commented 2 years ago 

<template>
  <tree-select v-model="dataModel" :multiple="multiple" :options="optionsData"/>
</template>

<script>
// import the component
import TreeSelect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { isZero } from "@/utils/validate";

export default {
  name: 'SelectTree',
  components: {
    TreeSelect,
  },
  props: {
    value: {
      type: String,
      default: () => {
        return null
      },
    },
    /* 多选 */
    multiple: {
      type: Boolean,
      required: false,
      default: false,
    },
    /* 树形结构的数据 */
    options: {
      type: Array,
      default: () => {
        return []
      },
    },
  },
  data() {
    return {
      dataModel: '',
      optionsData: [],
    }
  },
  watch: {
    dataModel(val) {
      this.$emit("input", val);
    },
  },
  mounted() {
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.dataModel = this.value
      this.dataModel = ''
      let cloneData = this.options
      let result = cloneData.filter(father => {
        // 循环所有项，并添加children属性
        let branchArr = cloneData.filter(child => father.id === child.parentId) // 返回每一项的子级数组
        branchArr.length > 0 ? (father.children = branchArr) : '' // 给父级添加一个children属性，并赋值
        return isZero(father.parentId) // 返回第一层
      })
      result.unshift({ id: 0, parentId: 0, label: 'ROOT' })
      this.optionsData = [{
        id: 'a',
        label: 'a',
        children: [{
          id: 'aa',
          label: 'aa',
        }, {
          id: 'ab',
          label: 'ab',
        }],
      }, {
        id: 'b',
        label: 'b',
      }, {
        id: 'c',
        label: 'c',
      }]
      console.log(this.dataModel)
      console.log(this.optionsData)
    },
  },
}
</script>

错误 信息 :

image


vue.runtime.esm.js:620 [Vue warn]: Error in getter for watcher "internalValue": "TypeError: this.forest.selectedNodeIds.filter is not a function"

found in

---> <VueTreeselect> at src/components/Treeselect.vue
       <SelectTree> at src/components/SelectTree/index.vue
         <ElFormItem> at packages/form/src/form-item.vue
           <ElForm> at packages/form/src/form.vue
             <ElDialog> at packages/dialog/src/component.vue
               <PrivilegeOperate> at src/components/Views/PrivilegeOperate.vue
                 <Privilege> at src/views/system/privilege.vue
                   <AppMain> at src/layout/components/AppMain.vue
                     <Layout> at src/layout/index.vue
                       <App> at src/App.vue
                         <Root>
warn @ vue.runtime.esm.js:620
logError @ vue.runtime.esm.js:1892
globalHandleError @ vue.runtime.esm.js:1887
handleError @ vue.runtime.esm.js:1847
get @ vue.runtime.esm.js:4492
Watcher @ vue.runtime.esm.js:4478
Vue.$watch @ vue.runtime.esm.js:4953
createWatcher @ vue.runtime.esm.js:4913
initWatch @ vue.runtime.esm.js:4895
initState @ vue.runtime.esm.js:4655
Vue._init @ vue.runtime.esm.js:5010
VueComponent @ vue.runtime.esm.js:5158
createComponentInstanceForVnode @ vue.runtime.esm.js:3301
init @ vue.runtime.esm.js:3130
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
updateChildren @ vue.runtime.esm.js:6250
patchVnode @ vue.runtime.esm.js:6353
updateChildren @ vue.runtime.esm.js:6227
patchVnode @ vue.runtime.esm.js:6353
patch @ vue.runtime.esm.js:6516
Vue._update @ vue.runtime.esm.js:3957
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
run @ vue.runtime.esm.js:4564
flushSchedulerQueue @ vue.runtime.esm.js:4320
eval @ vue.runtime.esm.js:1988
flushCallbacks @ vue.runtime.esm.js:1914
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1941
nextTick @ vue.runtime.esm.js:1998
queueWatcher @ vue.runtime.esm.js:4412
update @ vue.runtime.esm.js:4554
notify @ vue.runtime.esm.js:731
reactiveSetter @ vue.runtime.esm.js:1056
proxySetter @ vue.runtime.esm.js:4638
_callee2$ @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
open @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:396
handleAddUpdate @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=script&lang=js&:264
click @ cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f5280c5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=template&id=65104a6b&:235
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
invokeWithErrorHandling @ vue.runtime.esm.js:1862
Vue.$emit @ vue.runtime.esm.js:3897
handleClick @ element-ui.common.js:9457
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
original._wrapper @ vue.runtime.esm.js:6951
Show 36 more frames
vue.runtime.esm.js:1896 TypeError: this.forest.selectedNodeIds.filter is not a function
    at VueComponent.internalValue (vue-treeselect.cjs.js:888:53)
    at Watcher.get (vue.runtime.esm.js:4489:25)
    at Watcher.evaluate (vue.runtime.esm.js:4591:21)
    at VueComponent.computedGetter [as internalValue] (vue.runtime.esm.js:4843:17)
    at VueComponent.eval (vue.runtime.esm.js:504:16)
    at Watcher.get (vue.runtime.esm.js:4489:25)
    at new Watcher (vue.runtime.esm.js:4478:12)
    at VueComponent.Vue.$watch (vue.runtime.esm.js:4953:19)
    at createWatcher (vue.runtime.esm.js:4913:13)
    at initWatch (vue.runtime.esm.js:4895:7)
logError @ vue.runtime.esm.js:1896
globalHandleError @ vue.runtime.esm.js:1887
handleError @ vue.runtime.esm.js:1847
get @ vue.runtime.esm.js:4492
Watcher @ vue.runtime.esm.js:4478
Vue.$watch @ vue.runtime.esm.js:4953
createWatcher @ vue.runtime.esm.js:4913
initWatch @ vue.runtime.esm.js:4895
initState @ vue.runtime.esm.js:4655
Vue._init @ vue.runtime.esm.js:5010
VueComponent @ vue.runtime.esm.js:5158
createComponentInstanceForVnode @ vue.runtime.esm.js:3301
init @ vue.runtime.esm.js:3130
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
updateChildren @ vue.runtime.esm.js:6250
patchVnode @ vue.runtime.esm.js:6353
updateChildren @ vue.runtime.esm.js:6227
patchVnode @ vue.runtime.esm.js:6353
patch @ vue.runtime.esm.js:6516
Vue._update @ vue.runtime.esm.js:3957
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
run @ vue.runtime.esm.js:4564
flushSchedulerQueue @ vue.runtime.esm.js:4320
eval @ vue.runtime.esm.js:1988
flushCallbacks @ vue.runtime.esm.js:1914
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1941
nextTick @ vue.runtime.esm.js:1998
queueWatcher @ vue.runtime.esm.js:4412
update @ vue.runtime.esm.js:4554
notify @ vue.runtime.esm.js:731
reactiveSetter @ vue.runtime.esm.js:1056
proxySetter @ vue.runtime.esm.js:4638
_callee2$ @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
open @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:396
handleAddUpdate @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=script&lang=js&:264
click @ cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f5280c5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=template&id=65104a6b&:235
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
invokeWithErrorHandling @ vue.runtime.esm.js:1862
Vue.$emit @ vue.runtime.esm.js:3897
handleClick @ element-ui.common.js:9457
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
original._wrapper @ vue.runtime.esm.js:6951
Show 35 more frames
vue.runtime.esm.js:620 [Vue warn]: Error in callback for immediate watcher "options": "TypeError: this.forest.selectedNodeIds.forEach is not a function"

found in

---> <VueTreeselect> at src/components/Treeselect.vue
       <SelectTree> at src/components/SelectTree/index.vue
         <ElFormItem> at packages/form/src/form-item.vue
           <ElForm> at packages/form/src/form.vue
             <ElDialog> at packages/dialog/src/component.vue
               <PrivilegeOperate> at src/components/Views/PrivilegeOperate.vue
                 <Privilege> at src/views/system/privilege.vue
                   <AppMain> at src/layout/components/AppMain.vue
                     <Layout> at src/layout/index.vue
                       <App> at src/App.vue
                         <Root>
warn @ vue.runtime.esm.js:620
logError @ vue.runtime.esm.js:1892
globalHandleError @ vue.runtime.esm.js:1887
handleError @ vue.runtime.esm.js:1847
invokeWithErrorHandling @ vue.runtime.esm.js:1870
Vue.$watch @ vue.runtime.esm.js:4957
createWatcher @ vue.runtime.esm.js:4913
initWatch @ vue.runtime.esm.js:4895
initState @ vue.runtime.esm.js:4655
Vue._init @ vue.runtime.esm.js:5010
VueComponent @ vue.runtime.esm.js:5158
createComponentInstanceForVnode @ vue.runtime.esm.js:3301
init @ vue.runtime.esm.js:3130
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
updateChildren @ vue.runtime.esm.js:6250
patchVnode @ vue.runtime.esm.js:6353
updateChildren @ vue.runtime.esm.js:6227
patchVnode @ vue.runtime.esm.js:6353
patch @ vue.runtime.esm.js:6516
Vue._update @ vue.runtime.esm.js:3957
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
run @ vue.runtime.esm.js:4564
flushSchedulerQueue @ vue.runtime.esm.js:4320
eval @ vue.runtime.esm.js:1988
flushCallbacks @ vue.runtime.esm.js:1914
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1941
nextTick @ vue.runtime.esm.js:1998
queueWatcher @ vue.runtime.esm.js:4412
update @ vue.runtime.esm.js:4554
notify @ vue.runtime.esm.js:731
reactiveSetter @ vue.runtime.esm.js:1056
proxySetter @ vue.runtime.esm.js:4638
_callee2$ @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
open @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:396
handleAddUpdate @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=script&lang=js&:264
click @ cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f5280c5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=template&id=65104a6b&:235
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
invokeWithErrorHandling @ vue.runtime.esm.js:1862
Vue.$emit @ vue.runtime.esm.js:3897
handleClick @ element-ui.common.js:9457
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
original._wrapper @ vue.runtime.esm.js:6951
Show 35 more frames
vue.runtime.esm.js:1896 TypeError: this.forest.selectedNodeIds.forEach is not a function
    at VueComponent.keepDataOfSelectedNodes (vue-treeselect.cjs.js:1198:35)
    at VueComponent.initialize (vue-treeselect.cjs.js:1058:14)
    at VueComponent.handler (vue-treeselect.cjs.js:991:14)
    at invokeWithErrorHandling (vue.runtime.esm.js:1862:26)
    at VueComponent.Vue.$watch (vue.runtime.esm.js:4957:7)
    at createWatcher (vue.runtime.esm.js:4913:13)
    at initWatch (vue.runtime.esm.js:4895:7)
    at initState (vue.runtime.esm.js:4655:5)
    at VueComponent.Vue._init (vue.runtime.esm.js:5010:5)
    at new VueComponent (vue.runtime.esm.js:5158:12)
logError @ vue.runtime.esm.js:1896
globalHandleError @ vue.runtime.esm.js:1887
handleError @ vue.runtime.esm.js:1847
invokeWithErrorHandling @ vue.runtime.esm.js:1870
Vue.$watch @ vue.runtime.esm.js:4957
createWatcher @ vue.runtime.esm.js:4913
initWatch @ vue.runtime.esm.js:4895
initState @ vue.runtime.esm.js:4655
Vue._init @ vue.runtime.esm.js:5010
VueComponent @ vue.runtime.esm.js:5158
createComponentInstanceForVnode @ vue.runtime.esm.js:3301
init @ vue.runtime.esm.js:3130
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
updateChildren @ vue.runtime.esm.js:6250
patchVnode @ vue.runtime.esm.js:6353
updateChildren @ vue.runtime.esm.js:6227
patchVnode @ vue.runtime.esm.js:6353
patch @ vue.runtime.esm.js:6516
Vue._update @ vue.runtime.esm.js:3957
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
run @ vue.runtime.esm.js:4564
flushSchedulerQueue @ vue.runtime.esm.js:4320
eval @ vue.runtime.esm.js:1988
flushCallbacks @ vue.runtime.esm.js:1914
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1941
nextTick @ vue.runtime.esm.js:1998
queueWatcher @ vue.runtime.esm.js:4412
update @ vue.runtime.esm.js:4554
notify @ vue.runtime.esm.js:731
reactiveSetter @ vue.runtime.esm.js:1056
proxySetter @ vue.runtime.esm.js:4638
_callee2$ @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
open @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:396
handleAddUpdate @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=script&lang=js&:264
click @ cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f5280c5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=template&id=65104a6b&:235
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
invokeWithErrorHandling @ vue.runtime.esm.js:1862
Vue.$emit @ vue.runtime.esm.js:3897
handleClick @ element-ui.common.js:9457
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
original._wrapper @ vue.runtime.esm.js:6951
Show 34 more frames
vue.runtime.esm.js:620 [Vue warn]: Error in render: "TypeError: this.forest.selectedNodeIds.filter is not a function"

found in

---> <VueTreeselect> at src/components/Treeselect.vue
       <SelectTree> at src/components/SelectTree/index.vue
         <ElFormItem> at packages/form/src/form-item.vue
           <ElForm> at packages/form/src/form.vue
             <ElDialog> at packages/dialog/src/component.vue
               <PrivilegeOperate> at src/components/Views/PrivilegeOperate.vue
                 <Privilege> at src/views/system/privilege.vue
                   <AppMain> at src/layout/components/AppMain.vue
                     <Layout> at src/layout/index.vue
                       <App> at src/App.vue
                         <Root>
warn @ vue.runtime.esm.js:620
logError @ vue.runtime.esm.js:1892
globalHandleError @ vue.runtime.esm.js:1887
handleError @ vue.runtime.esm.js:1847
Vue._render @ vue.runtime.esm.js:3565
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
updateChildren @ vue.runtime.esm.js:6250
patchVnode @ vue.runtime.esm.js:6353
updateChildren @ vue.runtime.esm.js:6227
patchVnode @ vue.runtime.esm.js:6353
patch @ vue.runtime.esm.js:6516
Vue._update @ vue.runtime.esm.js:3957
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
run @ vue.runtime.esm.js:4564
flushSchedulerQueue @ vue.runtime.esm.js:4320
eval @ vue.runtime.esm.js:1988
flushCallbacks @ vue.runtime.esm.js:1914
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1941
nextTick @ vue.runtime.esm.js:1998
queueWatcher @ vue.runtime.esm.js:4412
update @ vue.runtime.esm.js:4554
notify @ vue.runtime.esm.js:731
reactiveSetter @ vue.runtime.esm.js:1056
proxySetter @ vue.runtime.esm.js:4638
_callee2$ @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
open @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:396
handleAddUpdate @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=script&lang=js&:264
click @ cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f5280c5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=template&id=65104a6b&:235
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
invokeWithErrorHandling @ vue.runtime.esm.js:1862
Vue.$emit @ vue.runtime.esm.js:3897
handleClick @ element-ui.common.js:9457
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
original._wrapper @ vue.runtime.esm.js:6951
Show 33 more frames
vue.runtime.esm.js:1896 TypeError: this.forest.selectedNodeIds.filter is not a function
    at VueComponent.internalValue (vue-treeselect.cjs.js:888:53)
    at Watcher.get (vue.runtime.esm.js:4489:25)
    at Watcher.evaluate (vue.runtime.esm.js:4591:21)
    at VueComponent.computedGetter [as internalValue] (vue.runtime.esm.js:4843:17)
    at VueComponent.hasValue (vue-treeselect.cjs.js:930:19)
    at Watcher.get (vue.runtime.esm.js:4489:25)
    at Watcher.evaluate (vue.runtime.esm.js:4591:21)
    at VueComponent.computedGetter [as hasValue] (vue.runtime.esm.js:4843:17)
    at VueComponent.wrapperClass (vue-treeselect.cjs.js:3836:43)
    at Watcher.get (vue.runtime.esm.js:4489:25)
logError @ vue.runtime.esm.js:1896
globalHandleError @ vue.runtime.esm.js:1887
handleError @ vue.runtime.esm.js:1847
Vue._render @ vue.runtime.esm.js:3565
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
patch @ vue.runtime.esm.js:6511
Vue._update @ vue.runtime.esm.js:3954
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
Watcher @ vue.runtime.esm.js:4478
mountComponent @ vue.runtime.esm.js:4082
Vue.$mount @ vue.runtime.esm.js:8449
init @ vue.runtime.esm.js:3134
createComponent @ vue.runtime.esm.js:6012
createElm @ vue.runtime.esm.js:5959
createChildren @ vue.runtime.esm.js:6087
createElm @ vue.runtime.esm.js:5988
updateChildren @ vue.runtime.esm.js:6250
patchVnode @ vue.runtime.esm.js:6353
updateChildren @ vue.runtime.esm.js:6227
patchVnode @ vue.runtime.esm.js:6353
patch @ vue.runtime.esm.js:6516
Vue._update @ vue.runtime.esm.js:3957
updateComponent @ vue.runtime.esm.js:4075
get @ vue.runtime.esm.js:4489
run @ vue.runtime.esm.js:4564
flushSchedulerQueue @ vue.runtime.esm.js:4320
eval @ vue.runtime.esm.js:1988
flushCallbacks @ vue.runtime.esm.js:1914
Promise.then (async)
timerFunc @ vue.runtime.esm.js:1941
nextTick @ vue.runtime.esm.js:1998
queueWatcher @ vue.runtime.esm.js:4412
update @ vue.runtime.esm.js:4554
notify @ vue.runtime.esm.js:731
reactiveSetter @ vue.runtime.esm.js:1056
proxySetter @ vue.runtime.esm.js:4638
_callee2$ @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:388
tryCatch @ runtime.js:63
invoke @ runtime.js:294
eval @ runtime.js:119
asyncGeneratorStep @ asyncToGenerator.js:5
_next @ asyncToGenerator.js:27
Promise.then (async)
asyncGeneratorStep @ asyncToGenerator.js:15
_next @ asyncToGenerator.js:27
eval @ asyncToGenerator.js:34
eval @ asyncToGenerator.js:23
open @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Views/PrivilegeOperate.vue?vue&type=script&lang=js&:396
handleAddUpdate @ cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=script&lang=js&:264
click @ cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3f5280c5-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/system/privilege.vue?vue&type=template&id=65104a6b&:235
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
invokeWithErrorHandling @ vue.runtime.esm.js:1862
Vue.$emit @ vue.runtime.esm.js:3897
handleClick @ element-ui.common.js:9457
invokeWithErrorHandling @ vue.runtime.esm.js:1862
invoker @ vue.runtime.esm.js:2187
original._wrapper @ vue.runtime.esm.js:6951
Show 32 more frames
index.js?http://192.168.1.3:8001&sockPath=/sockjs-node:172 [WDS] Disconnected!
close @ index.js?http://192.168.1.3:8001&sockPath=/sockjs-node:172
eval @ socket.js:26
EventTarget.dispatchEvent @ sockjs.js:170
eval @ sockjs.js:967
setTimeout (async)
SockJS._close @ sockjs.js:955
SockJS._receiveInfo @ sockjs.js:784
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
eval @ sockjs.js:556

image

yangup commented 2 years ago

原因找到了,

初始值必须是null而不能是''。

https://githubmemory.com/repo/riophae/vue-treeselect/issues/441

EmpireConsultants commented 2 months ago

@yangup Thank you so much for posting the solution. I couldn't get past that error and this helped me very much