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