小编Olj*_*vic的帖子

使用 Vue-Treeselect 找不到在不存在的情况下添加新项目的方法

我正在尝试创建一个下拉菜单,其中包含我从后端填充的列表。这是有问题的库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)

javascript autocomplete vue.js vue-treeselect

3
推荐指数
1
解决办法
1918
查看次数

标签 统计

autocomplete ×1

javascript ×1

vue-treeselect ×1

vue.js ×1