0

我正在尝试在我的 Laravel 7.3 项目中包含Vue- Multiselect 我最终想要包含多个选择选项，但我试图将其设置为正常的选择选项以开始并试用它。

我已经尝试按照为其提供的所有说明进行设置（通过 npm 安装）并按照 Laravel 示例 Vue 组件的示例进行设置，但是，当我运行它时，我得到了两组错误：

  • 属性或方法“值”未在实例上定义，但在渲染期间被引用
  • 未捕获的 RangeError：超出最大调用堆栈大小

我已按照说明操作并尝试复制确切的代码以确保仍然会导致与我在下面包含的改编代码相同的错误。

多选.vue 组件

<template>
  <div>
    <multiselect v-model="value" :options="options"></multiselect>
  </div>
</template>

<script>
 import Multiselect from 'vue-multiselect'
 Vue.component('multiselect', Multiselect)

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: '',
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched']
    }
  }
}
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

在 app.js 中包含组件

Vue.component('multiselect', require('./components/multiselect.vue').default);

刀片模板

    <div>
         <label class="typo__label">Single select</label>
         <multiselect v-model="value" :options="{{$members_list->toJSON()}}" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect>
         <pre class="language-json"><code>@{{ value  }}</code></pre>
    </div>
4

0 回答 0