javascript - 現在の値と一致しない要素を非表示にして prop と比較する方法

Question

名詞、動詞、形容詞など、1 つのページにさまざまな単語のグループがあります。各グループを説明する方法は、その「品詞」です。この「品詞」は、小さな箱の中に印刷されています。つまり、グループの「品詞」である名詞が小さなボックスに表示されます。そのボックスをクリックすると、動詞と形容詞が非表示になるようにしたいと考えています。動詞をクリックすると、名詞や形容詞などが非表示になります。現在、各グループの「品詞」が小道具として渡されています。

問題は、現在のページに存在する品詞とクリックされた品詞を比較したいのですが、それを区別することができません。

私のテンプレートには次のものがあります。

<div class="part-of-speech">
    <p class="pos">{{ pos }}</p>
</div>

これ{ pos }は私の小道具から来ています

props: {
    pos: {
        type: String,
        required: false,
        default: "na"
    }
},
mounted() {
   console.log(this.pos)
}

これにより、ページに印刷されているすべての品詞が得られます (これは他の何かの子コンポーネントであり、これらの単語のグループはグループと同じ回数印刷されることを考慮してください)。そのため、クリックされた品詞を検出するメソッドを追加すると役立つと思いました。

<div class="part-of-speech" @click="handleSelectedPos(pos)">
    <p class="pos">{{ pos }}</p>
</div>

props: {
    pos: {
        type: String,
        required: false,
        default: "na"
    }
},
methods: {
    handleSelectedPos(pos) {
        console.log(pos);
        console.log(this.pos);
    }
}

現在のアイテムをクリックすると、現在の品詞が表示されますthis.pos。このコンテキストでわかるように、ページ上の品詞のリストではなく、現在クリックされている部分になっています。 -スピーチ。pos私の考えは、とをどうにかして比較することでしたthis.posが、現在は同じです。

比較を行う方法: 現在クリックされているものと等しくない品詞がある場合は、要素を非表示にするために何らかのアクション (クラスまたは wtv を追加) を実行します。