Как определить фильтр в компоненте класса Vue? - PullRequest
0 голосов
/ 15 октября 2018

Компонент класса Vue - это относительно новый способ написания однофайловых компонентов.Это выглядит так:

import Vue from 'vue'
import Component from 'vue-class-component'

// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})
export default class MyComponent extends Vue {
  // Initial data can be declared as instance properties
  message: string = 'Hello!'

  // Component methods can be declared as instance methods
  onClick (): void {
    window.alert(this.message)
  }
}

Вот некоторые ссылки на него:

https://vuejs.org/v2/guide/typescript.html#Class-Style-Vue-Components https://github.com/vuejs/vue-class-component

Однако,никто из них не объясняет, как писать фильтры в этом синтаксисе.Если я попробую следующий код в моем шаблоне:

{{ output | stringify }}

И затем попытаюсь написать фильтр как метод класса, например:

@Component
export default class HelloWorld extends Vue {
  // ... other things

  stringify(stuff: any) {
    return JSON.stringify(stuff, null, 2);
  }    
}

Я получу следующую ошибку:

enter image description here

Как правильно добавить фильтр в этот новый синтаксис?

1 Ответ

0 голосов
/ 15 октября 2018

В компоненте класса ключом является этот комментарий (// All component options are allowed in here) в документации:

// The @Component decorator indicates the class is a Vue component
@Component({
  // All component options are allowed in here
  template: '<button @click="onClick">Click!</button>'
})

Это означает, что в разделе @Component вы сможете добавить объект filtersс вашими фильтрами внутри, вот так

@Component({
  // other options
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

Согласно документу в https://github.com/vuejs/vue-class-component:

Примечание:

  1. методы могут бытьобъявляется непосредственно как методы члена класса.

  2. Вычисленные свойства могут быть объявлены как средства доступа к свойствам класса.

  3. Исходные данные могут быть объявлены как свойства класса (babel-plugin-transform-class-properties требуется, если вы используете Babel).

  4. data, render и все хуки жизненного цикла Vue также могут быть непосредственно объявлены как методы членов класса, но выне может вызвать их на самом экземпляре.При объявлении пользовательских методов следует избегать этих зарезервированных имен.

  5. Для всех других параметров передайте их функции декоратора.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...