javascript - 如何在 Vue 中动态标记或标记 DOM 元素

Question

我有一个简单的过滤器组件设置，所以当您单击一个按钮时，计算值会使用过滤后的数据列表更新 UI。

我无法弄清楚以某种方式标记或标记已单击的按钮的“Vue 方式”，因此在代码中我可以说“过滤器已经打开，将其关闭”

在 jquery 中，我会做这样的事情，如果过滤器打开，我可以运行不同的代码

$('button').on('click', func(){ $this.addClass('hasFilter')} )

Vue 片段

<button class="button is-info" v-on:click="filterCats('Logos')">Logos</button>
<button class="button is-info" v-on:click="filterCats('Print')">Print</button>

computed: {
  filteredData: function () {
    return this.filteredCats
  }
},
methods: {
  filterCats: function (cat) {
    let items = this.filteredCats
    let filterCount = 0
    let result = {}
    Object.keys(items).forEach(key => {
      const item = items[key]
      if (item.cat_names.some(cat_names => cat_names === cat)) {
        result[key] = item
        filterCount++
      }
    })

    event.target.classList.add('active')
    this.filteredCats = result
  }
},

Answer 1

您可以使用 filtered data 属性来控制它。

声明它:

  data() {
    return {
      // ...
      filtered: false                                              // added this line
    }
  },

然后在点击时改变它:

<button class="button is-info" v-on:click="filterCats('Logos'); filtered = true">Logos</button>

另一种可能性是保持模板原样 (v-on:click="filterCats('Logos');") 并改为更改方法上的标志:

   methods: {
    filterCats: function (cat) {
      // ...
      this.filteredCats = result
      this.filtered = true;                                        // added this line
    }
  },

演示:

new Vue({
  el: '#app',
  data() {
    return {
      filteredCats: {
      	one: {cat_names: ['Logos'], title: {rendered: 'one'}},
        two: {cat_names: ['Two'], title: {rendered: 'two'}},
        three: {cat_names: ['Three'], title: {rendered: 'three'}}
      },
      filtered: false                                              // added this line
    }
  },
  computed: {
    filteredData: function () {
      return this.filteredCats
    }
  },
  methods: {
    filterCats: function (cat) {
      let items = this.filteredCats
      let filterCount = 0
      let result = {}
      Object.keys(items).forEach(key => {
        const item = items[key]
        if (item.cat_names.some(cat_names => cat_names === cat)) {
          result[key] = item
          filterCount++
        }
      })

      event.target.classList.add('active')
      this.filteredCats = result
      this.filtered = true;                                        // added this line
    }
  },
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  filtered? {{ filtered }}
  <br>
  <button class="button is-info" v-on:click="filterCats('Logos');">Logos</button>

  <div class="list-item" v-for="asset in filteredData">
      <a>{{ asset.title.rendered }}</a>
  </div>
</div>

演示(更改模板):

new Vue({
  el: '#app',
  data() {
    return {
      filteredCats: {
      	one: {cat_names: ['Logos'], title: {rendered: 'one'}},
        two: {cat_names: ['Two'], title: {rendered: 'two'}},
        three: {cat_names: ['Three'], title: {rendered: 'three'}}
      },
      filtered: false
    }
  },
  computed: {
    filteredData: function () {
      return this.filteredCats
    }
  },
  methods: {
    filterCats: function (cat) {
      let items = this.filteredCats
      let filterCount = 0
      let result = {}
      Object.keys(items).forEach(key => {
        const item = items[key]
        if (item.cat_names.some(cat_names => cat_names === cat)) {
          result[key] = item
          filterCount++
        }
      })

      event.target.classList.add('active')
      this.filteredCats = result
    }
  },
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  filtered? {{ filtered }}
  <br>
  <button class="button is-info" v-on:click="filterCats('Logos'); filtered = true">Logos</button>

  <div class="list-item" v-for="asset in filteredData">
      <a>{{ asset.title.rendered }}</a>
  </div>
</div>