[Vue 警告]：无法解析过滤器：concat 姓氏

Question

我是 vue 新手并尝试创建过滤器，我仅使用数据元素成功创建了过滤器，但是当我尝试使用内联参数创建时，它给了我上述错误。 我也尝试使用字符串而不是变量，但它不起作用。

我的过滤器是这样的

 Vue.filter("concat", (value, surname) => {
      return value + surname;
    });`

和这样的组件

    <template>
  <div>
    <h1>{{ firstName | concat surname}}</h1>
  </div>
</template>
<script>
export default {
  name: "FilterComponent",
  data() {
    return {
      firstName: "Alex",
      surname: "Johnson",
    };
  },
};
</script>

Answer 1

你不能像这样使用过滤器。 如果您想将 surname 作为参数传递给您的过滤器，您可以这样做（val 将是函数中的名字）：

<template>
  <div id="app">
    <h1> {{ firstname | concat(surname) }} </h1>
  </div>
</template>

<script>

export default {
  name: "App",
  data () {
    return {
      firstname :  "FirstName",
      surname : "LastName"
    }
  },
  filters: {
    concat : function (val, surname) {
      return val + surname // will return full name
    }
  }

};
</script>