我想通过 v-html 使用 vue 过滤器后使用 queryselectorall答案

【问题标题】：I want to use queryselectorall after using vue filter through v-html我想通过 v-html 使用 vue 过滤器后使用 queryselectorall
【发布时间】：2020-03-07 15:08:19
【问题描述】：

我正在使用 vuejs 进行编码。

单击按钮时，我已经实现了某些单词的高亮显示。（我在这里使用了“2”这个词）

我使用了 v-html 和过滤器。

我想打印所有突出显示的元素。

所以我写了这样的代码。

<template>
  <div id="app">
    <button @click="c">asd</button>
    <div class="pg-post" v-for="(post) in filteredList" :key="post.title">
      <h2 v-html="change(post.title)"></h2>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  methods: {
    change(title) {
      return this.$options.filters.highlight(title, this.search);
    },
    me() {
      console.log(document.querySelectorAll(".highlight"));
    },
    c() {
      this.search = "2";
      this.me();
    }
  },
  data() {
    return {
      search: "",
      filteredList: [
        { title: "asd" },
        { title: "asd2" },
        { title: "hi" },
        { title: "hi2" },
        { title: "hi3" },
        { title: "hi4" },
        { title: "sjs5jsjsj" },
        { title: "sjsjsjssj" },
        { title: "sjsjsjssj22" },
        { title: "sjsjsjssj2222" },
        { title: "hi5" },
        { title: "hi6" }
      ]
    };
  },
  filters: {
    highlight: function(stringToSearch, searchTerm) {
      if (searchTerm === "") return stringToSearch;
      var iQuery = new RegExp(searchTerm, "ig");
      return stringToSearch
        .toString()
        .replace(iQuery, function(matchedText, a, b) {
          return "<span class='highlight'>" + matchedText + "</span>";
        });
    }
  }
};
</script>

<style>
.highlight {
  color: red;
}
</style>

我使用了 queryselectorall。

但它没有输出。

这是输出。

NodeList {constructor: Object}
<constructor>: "NodeList"
name: "NodeList"

我想要这样的东西

NodeList(8) [span.highlight, span.highlight, span.highlight, span.highlight, span.highlight, span.highlight, span.highlight, span.highlight]
length: 8
0: span.highlight
1: span.highlight
2: span.highlight
3: span.highlight
4: span.highlight
5: span.highlight
6: span.highlight
7: span.highlight
__proto__: NodeList

如何打印我想要的？

我不擅长英语，所以我不擅长解释。对此我感到非常抱歉。

【问题讨论】：

标签： vue.js ecmascript-6

【解决方案1】：

querySelectorAll 返回一个 NodeList，而不是一个数组。

您可以使用扩展运算符将其转换为数组并在 console.log / 循环它。


console.log(highlights);

highlights.forEach(highlight => {
    console.log(highlight);
});

【讨论】：