Question

你好

我正在编写一个帖子的网页，我想添加一个标签系统，比如堆栈溢出。

我发现许多有用的代码已经像Tag it by：aehlke。问题在于我想使用vuejs.org的几乎所有代码。

我在laravel 5.3框架和vuejs也使用jquery。

请你帮我用js制作一个“逗号分隔”标签，只能使用标签表中已有的标签。

我使用了vuejs.org中的示例来制作一个搜索框，在vue var中搜索并在底部显示它，我应该使用laravel变量来制作vuejs var然后搜索，但我怎么能做每次在底部的表格上点击一个值时，文本字段都会在里面用标记进行更新。

<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' }
    ]
  }
})

帮助。

Answer 1

这不是代码 - 这是给我的＃34; -site所以如果你需要一些帮助，你需要发布一些代码，有人可能会告诉你它有什么问题。

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

https://select2.github.io/

http://selectize.github.io/selectize.js/

Vuejs标签和ajax

你好

1 个答案: