CODEWITHSUNDEEP
vue.jsfilterbadge
app_er
app_er

Reputation: 87

How to replace() two characters at a time using Filters and how to have a separate Badge in the context of VueJS

I am displaying the text that is coming from the API as a badge and I want to filter certain things from it and I want to display the badge for each word that comes from the API.

Here is the code:

<span class="badge_style" id="badge" v-if="text.name">{{text.name | displayDesired}}</span>
  ...
  text: [],
  ...
  filters: {
    displayDesired: function (val){
      return val.replace(/_/g, ' ')
  },
  created() {
    this.$http.get(`/all-text`)
      .then((res) => { this.text = res.data })
      .catch((err) => {console.log(err)})
  }
  ... 
  .badge_style {
  display: inline-block;
  padding: .25em .4em;
  font-size: 85%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  text-transform: capitalize;
},
#badge {
 color: white;
  font-size: 12px;
  background: blue;
}

{{text.name}} displays => The badge looks like this change_plan1|change_plan2|change_plan3 this is what I am getting from the API.

{{text.name | displayDesired}} with text-transform style displays => Change Plan1|Change Plan2|Change Plan3here the pipe should be replaced by the space and should get a separate badge.

Expected display => The badge should look something like this Change Plan1 Change Plan2 Change Plan3

Please tell me how to achieve the expected output

Upvotes: 0

Views: 526

Answers (1)

Ashwin Bande
Ashwin Bande

Reputation: 3063

Convert your filter to method as following

methods: {
        displayDesired: function (val){
          return val.replaceAll('_', ' ').split('|');
      },

as make the template as below:

<span id="badge" v-if="text.name">
   <template v-for="(val, i) in displayDesired(text.name)">
      <span class="badge_style" style="margin: 2px 2px 2px;" :key="i">{{ val }} </span> 
   </template>
</span>

Upvotes: 2

Related Questions