Hide some phrase in vueJs project

Question

I'm working on a RealWord App for Vue project. I'm trying to find a way to hide the phrase "test", so that it cannot show any article with the "test" phrase.

TagList.vue Component:

<template>
  <ul class="tag-list">
    <li
      class="tag-default tag-pill tag-outline"
      v-for="(tag, index) of tags"
      :key="index"
    >
      <span v-text="tag" />
    </li>
  </ul>
</template>

<script>
export default {
  name: "TagList",
  props: {
    tags: Array
  }
};
</script>

tony19 · Accepted Answer · 2022-07-16 02:15:59Z

1

To hide tags that contain "test", use a computed prop to get a filtered array of tags[]:

export default {
  computed: {
    filteredTags() {
      return this.tags.filter(tag => tag !== 'test')
    }
  }
}

Then, update your v-for to use this computed prop:

<li v-for="(tag, index) of filteredTags">

edited Jul 16, 2022 at 2:15

answered Aug 30, 2020 at 23:51

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wafa.A Over a year ago

i think it works very well but there is error says "Error in render: "ReferenceError: tags is not defined"

Collectives™ on Stack Overflow

Hide some phrase in vueJs project

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related