Как писать свои фильтры в vue js?

Question

[Михаил]

Интересует как написать свой фильтр в vue. В сети нашел где показывают родные фильтры вью, а те которые сами писали почему то не работают.
К примеру простая функция замены слова.
Делал двумя способами но выдает ошибку, что те не так делаю.

filter: {
     vend: function(item){
         return item.replace("17", "RTX3");
      }
},

и

Vue.filter('vend',function(item){
     return item.replace("17", "RTX3");
 })

в шаблоне

<tr v-for="item in selected">
     <td>${item.vendor | vend }</td>
</tr>

Answer 1

[Алексей Шашенков]

Все работает
Обновил для ${}

Comments

[Михаил]

Спасибо.
По ходу выспаться нужно. Не работает и все(
item.replace is not a function

filters:{
           test(item){
               return item.replace("17", "RTX3");
           }
         },

[Алексей Шашенков]

Михаил: Если вы мой вариант модите, то там item это object. Там массив объектов. Пришлите ссылку на мод

[Антон Антон]

Вот такой вариант для фильтра явно лишний и вредный для поддержки. computed или methods тут уместнее.

[Алексей Шашенков]

Антон Антон: Я не спорю, можно создать в data массив и модить его по мере ввода, я просто показал, что фильтр тоже работает.

[Михаил]

Алексей Шашенков: Пример

[Антон Антон]

Алексей Шашенков: Так было бы нагляднее:
https://jsfiddle.net/y204th01/2/
а модить массив не надо, можно так (Хотя правильнее вынести map в соответствующее Computed свойство):
https://jsfiddle.net/cft3pb5w/2/

[Алексей Шашенков]

Михаил: Начнем с того что у вас vendor - это число, а прототипе числа нет ф-ции replace. Как вариант

[Михаил]

Нашел причину, передается число, а не строка

[Михаил]

Спасибо за помощь. Вопрос, как подсчитать количество слов если

"domain": "extendbroadband.com extendbroadband.com extendbroadband.com"

и выдать в виде (3\6) где 3 количество слов. считать нужно только слова которые разделены пробелом.
Помогите пожалуйста. Устал за сутки)))

[Алексей Шашенков]

Михаил:

"extendbroadband.com extendbroadband.com extendbroadband.com".split(' ').length

prntscr.com/g6eqmr

[Михаил]

Алексей Шашенков: Пример, но результат не верен. help me

[Алексей Шашенков]

Михаил: Не понял

[Михаил]

Алексей Шашенков: слова 3, а пишет 1\6, а не 3\6

[Алексей Шашенков]

Михаил: Скиньте код полностью.

[Михаил]

<!-- demo root element -->
<div id="demo">
<table>
<tbody id="table">
    <tr v-for="item in selected">
           <td>${item.country}</td>
           <td>${item.region}</td>
          <td>${item.city}</td>
          <td>${item.vendor|test}</td>     
          <td>${blacklist|blak}</td> 
    </tr>
 </tbody>
</table>
</div>

// bootstrap the demo
var demo = new Vue({
  el: '#demo',
  delimiters: ['${', '}'],
  data() {
   return {
    "selected": [
      {
        "country": "Bahamas",
        "region_code": "23",
        "city": "Nassau",
        "vendor": "16",
        "blacklist": "cbl.abuseat.org bl.spamcop.net b.barracudacentral.org"
      }
    ]
   }},
   filters:{
      test(item){
     		 return item.replace("16", "RTX3");
    },
      blak(item){
             var str = String(item)
             var count = str.split(' ').length;
             return "(" + count + "\\6"+")"
      }
   }

[Михаил]

фильтр blak

[Алексей Шашенков]

Михаил: Вот так?

[Михаил]

Алексей Шашенков: Да, уже сам успел найти, спасибо большое за помощь. Решил что нужно больше спать чем 3 часа))

Answer 2

[Антон Антон]

вроде, все работает, только использовать надо {{}} https://jsfiddle.net/pwrzkg1o/1/
Ну а вообще ценность фильтров в данном контексте сомнительна, я бы использовал вычисляемые свойства.

Comments

[Михаил]

А если я использую django и нельзя делать {{}}, у меня delimiters: ['${', '}'],

[Антон Антон]

так тоже работает https://jsfiddle.net/pwrzkg1o/2/