Я хочу использовать queryselectorall после использования фильтра vue через v- html

Question

Я кодирую, используя 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

Как мне напечатать то, что я хочу?

Я не очень хорош в Engli sh, поэтому я не умею объяснять. Мне очень жаль.

Answer 1

querySelectorAll возвращает NodeList, а не массив.

Вы можете использовать оператор распространения для преобразования его в массив и console.log / l oop it.

console.log(highlights);

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