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

Question

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

score 2 · Accepted Answer · edited Jan 21 '21 at 04:50

2

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>

edited Jan 21 '21 at 04:50

app_er

87
10

answered Jan 20 '21 at 14:29

Ashwin Bande

2,693
2
10
22

Thank you, but from your function, only the '_' will be removed but my API returns this "changing_plan1|changing_plan2|changing_plan3", as you can see it contains pipe also in it, so I want to remove the "_" and "|" from that and display a separate badge for each. Please do help me. – app_er Jan 20 '21 at 16:50
@app_er corrected as per request! please mark the answer as accepted if it solves your problem. – Ashwin Bande Jan 20 '21 at 17:41
Hello @ashwin bande, i just wanted to know how to capitalize each word using filters only, can you please show it in the same answer, that would be great. – app_er Jan 21 '21 at 18:11

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

1 Answers1