我正在尝试创建一个下拉菜单,其中包含我从后端填充的列表。这是有问题的库Vue Treeselect
一旦用户尝试输入不在内部的内容,我希望能够动态添加它,然后在提交请求时在后端创建该值。但是,该库似乎没有提供覆盖默认行为的方法。这是我到目前为止所尝试的。
https://codesandbox.io/s/musing-sutherland-i5e8f?fontsize=14&hidenavigation=1&theme=dark
<template>
<div id="app">
<div class="container mt-4 mx-auto">
<treeselect
@search-change="handleSearch"
:multiple="true"
:options="options"
placeholder="Select your favourite(s)..."
no-results-text="No results found... Press enter to add"
v-model="value"
>
</treeselect>
<pre class="bg-gray-200 text-gray-600 rounded mt-4 p-4">{{
JSON.stringify(value, null, 2)
}}</pre>
<h5>Search text: {{ text }}</h5>
<button
@click="appendNewItem"
class="focus:outline-none text-white text-sm py-2.5 px-5 rounded-md bg-blue-500 hover:bg-blue-600 hover:shadow-lg"
>
Add
</button>
</div>
</div>
</template>
<script>
// import the component
import Treeselect from "@riophae/vue-treeselect";
// import the styles
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: …Run Code Online (Sandbox Code Playgroud)