Expression error in Vue.js with filterBy

Question

This is the excerpt of the code that is in trouble;

<div class="well">
            <input type="search" v-model="MySearch" class="form-control" placeholder="Search"/>
        </div>

        <div class="row">
        <table class="table">
            <thead>
              <tr>
                <th>Nome</th>
                <th>Altura</th>
                <th>Peso</th>
                <th>Cor dos Olhos</th>
                <th>Genero</th>
                <th>Cor dos cabelos</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="bancodedado in bancodedados | filterBy MySearch ">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.height }}</td>
                <td>{{ bancodedado.mass }}</td>
                <td>{{ bancodedado.eye_color }}</td>
                <td>{{ bancodedado.gender }}</td>
                <td>{{ bancodedado.hair_color }}</td>
              </tr>
            </tbody>
          </table>
    </div>

This is the Javascript code;

new Vue({
  el: '#app',
  data: {
    bancodedados: [],
    MySearch:''

  },
  methods: {

  },
  created: function() {
    var self = this;
    self.$http.get('https://swapi.co/api/people/?format=json').then(function(response) {
      self.bancodedados = response.body.results;
    });
  }
});

I’m performing as in the Document of the Vue.js

Documentation

but it is causing me an error in the browser console as you can see in the message below;

  [Vue warn]: Error compiling template:

<div class="container" id="app">
    <div class="row">
        <h1>Book</h1>
    </div>
        <div class="well">
            <input type="search" v-model="MySearch" class="form-control" placeholder="Search">
        </div>

        <div class="row">
        <table class="table">
            <thead>
              <tr>
                <th>Nome</th>
                <th>Altura</th>
                <th>Peso</th>
                <th>Cor dos Olhos</th>
                <th>Genero</th>
                <th>Cor dos cabelos</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="bancodedado in bancodedados | filterBy MySearch ">
                <td>{{ bancodedado.name }}</td>
                <td>{{ bancodedado.height }}</td>
                <td>{{ bancodedado.mass }}</td>
                <td>{{ bancodedado.eye_color }}</td>
                <td>{{ bancodedado.gender }}</td>
                <td>{{ bancodedado.hair_color }}</td>
              </tr>
            </tbody>
          </table>
    </div>

</div>

- invalid expression: v-for="bancodedado in bancodedados | filterBy MySearch "


(found in <Root>)

In other words, he’s saying he didn’t find the variable Mysearch

I accept suggestions!

===================================================================

You can see it’s the same problem, and it was solved. Mine was to work.

CLICK HERE

Answer 1

the documentation states that this filter only works with v-repeat