如何使用过滤器一次替换（）两个字符以及如何在 VueJS 的上下文中有一个单独的徽章

Question

我将来自 API 的文本显示为徽章，我想从中过滤某些内容，我想为来自 [=30= 的每个单词显示徽章].

代码如下：

<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}} 显示 => 徽章看起来像这样 change_plan1|change_plan2|change_plan3 这就是我从 API.

得到的

{{text.name | displayDesired}} 带有文本转换风格的显示 => Change Plan1|Change Plan2|Change Plan3这里的管道应该被 space 替换并且应该有一个单独的徽章。

预期显示 => 徽章应该看起来像这样 Change Plan1 Change Plan2 Change Plan3

请告诉我如何达到预期的输出

Answer 1

将您的过滤器转换为如下方法

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

制作模板如下：

<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>

如何使用过滤器一次替换（）两个字符以及如何在 VueJS 的上下文中有一个单独的徽章

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

filter

badge

vue.js