Почему возникает ошибка «Failed to resolve filters» Vue.js?

Question

[Владислав]

Проблема с фильтром для "price"

<div id="vue-app-one">
        <header>
            <h1 v-text="sitename"></h1>
            <p>I said {{string}}</p>
        </header>
        <main>
            <div class="product">
                <h1>{{product.title}}</h1>
                <p v-html='product.description'></p>
                <p class="price">
                    {{ product.price | formatPrice }}
                </p>
            </div>
        </main>
    </div>

JS

var app = new Vue({
    el: '#vue-app-one',
    data: {
        sitename: 'The Shop',
        string: 'Hello',
        product: {
            id: 1001,
            title: 'Phone',
            description: 'The best one <em>phone</em> ever',
            price: 1000000,
            image: 'This is an image',
        },
    filters: {
        formatPrice: function(price){
            if (!parseInt(price)) {return "";}
            if (price > 9999){
                var priceString = (price /100).toFixed(2);
                var priceArray = priceString.split("").reverse();
                var index = 3;
                while (priceArray.length > index +3){
                    priceArray.splice(index+3, 0, ',');
                    index +=4;
                }
                return '$' + priceArray.reverse().join('');
            } else{
                return '$' + (price/100).toFixed(2);
            }
        }
    }
},
});

В консоли

Vue warn]: Failed to resolve filter: formatPrice
(found in <Anonymous>)

И больше ничего что могло бы понятней указать на проблему.
Писал согласно с документацией. Как я понимаю, фильтр не запускается вообще так как изменения в его коде не привели к результату. В документации написано, что можно ещё через v-bind написать, но как я понимаю это не для каждого случая.

Answer 1

[Aetae]

А нечего отступы вручную расставлять.
Вот ваш код в нормальном виде:

var app = new Vue({
  el: '#vue-app-one',
  data: {
    sitename: 'The Shop',
    string: 'Hello',
    product: {
      id: 1001,
      title: 'Phone',
      description: 'The best one <em>phone</em> ever',
      price: 1000000,
      image: 'This is an image',
    },
    filters: {
      formatPrice: function(price){
        if (!parseInt(price)) {return "";}
        if (price > 9999){
          var priceString = (price /100).toFixed(2);
          var priceArray = priceString.split("").reverse();
          var index = 3;
          while (priceArray.length > index +3){
            priceArray.splice(index+3, 0, ',');
            index +=4;
          }
          return '$' + priceArray.reverse().join('');
        } else{
          return '$' + (price/100).toFixed(2);
        }
      }
    }
  },
});

Ничего не замечаете?

Разгадка

Фильтры не должны лежать в data, они не данные.

Comments

[Владислав]

Не обратил внимание что фильтры в данные положил. Чертовы скобки. Спасибо.

Answer 2

[Андрей]

Возможно, у вас есть еще один компонент, который использует фильтр с таким же названием. Желательно сделать переиспользуемые фильтры глобальными.

Comments

[Владислав]

То что написано выше это весь код.
Спасибо, попробую сделать глобальным.