Laravel 5 Vuejs标记和ajax 你好

我正在编写一个帖子的网页，我想在其中添加一个标签系统，类似于堆栈溢出

我已经发现了很多有用的代码，比如Tag-it-by:aehlke。 问题是我想使用vuejs.org提供的几乎所有代码

我在Laravel5.3框架下工作，vuejs也在使用jquery

你能帮我用js做一个“用逗号分隔”的标签吗？这个标签只能使用标签表中已有的标签

我使用vuejs.org中的示例制作了一个搜索框，搜索vue变量并将其显示在底部，我认为我可以使用laravel变量制作vuejs变量，然后进行搜索，但如何使每次单击底部表格上的值时，文本字段都会更新，并在其中添加一个标记

---

帮助。

这不是一个“为我编写代码”的网站，所以如果你需要帮助，你需要发布一些代码，有人可能会告诉你有什么问题

无论如何，您可能会对其中一个JS库感兴趣：

---

是的，对不起，我刚刚添加了我制作的内容。什么都可以，谢谢。

<script type="text/x-template" id="grid-template">
  <table>
    <tbody>
      <tr v-for="
        entry in data
        | filterBy filterKey
        | orderBy sortKey sortOrders[sortKey]">
        <td v-for="key in columns">
          <a href="#">{{entry[key]}}</a>
        </td>
      </tr>
    </tbody>
  </table>
</script>

<div id="demo">
  <form id="search">
    Search <input name="query" v-model="searchQuery">
  </form>
  <demo-grid
    :data="gridData"
    :columns="gridColumns"
    :filter-key="searchQuery">
  </demo-grid>
</div>

Vue.component('demo-grid', {
  template: '#grid-template',
  props: {
    data: Array,
    columns: Array,
    filterKey: String
  },

  methods: {
    sortBy: function (key) {
      this.sortKey = key
      this.sortOrders[key] = this.sortOrders[key] * -1
    }
  }
})

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  data: {
    searchQuery: '',
    gridColumns: ['tag'],
    gridData: [
      { tag: 'Movies'},
      { tag: 'Tv Shows' },
      { tag: 'Books'},
      { tag: 'Comics' }
    ]
  }
})