Error in Vue.js filterBy

Asked

Viewed 143 times

1

I’m using vue.js in my application and would like to filter information with the filterBy

HTML

<html>

<head>
  <title>Vue Application</title>
  <link rel="stylesheet" href="lib/css/bootstrap.min.css">
  <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css">
</head>

<body>

  <div class="container" id="app">

    <div class="row">

      <center>
        <h1>BOOKS</h1>
        <button type="button" class="btn btn-danger" @click="getData">Get Data</button>
        <br><br>
        <div class="well">
          <input type="search" class="form-control" v-model="mySearch" placeholder="Search">
        </div>
      </center>
    </div>

    <div class="row">

      <table class="table">

        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Value</th>
            <th>Description</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="book in books | filterBy mySearch">
            <td>{{ book.id }}</td>
            <td>{{ book.title }}</td>
            <td>R$ {{ book.value }}</td>
            <td>{{ book.description }}</td>
          </tr>
        </tbody>

      </table>

    </div>

  </div>

  <br><br>
  <script src="node_modules/vue/dist/vue.js"></script>
  <script src="node_modules/vue-resource/dist/vue-resource.js"></script>
  <script src="js/app.js"></script>
</body>

</html>

APP.JS

let app = new Vue({

  el: '#app',
  data:{
    books: [],
    mySearch: ''

  },
  methods:{
    getData: function(){
      let self = this;
      self.$http.get('dataServer.json').then(function(response){
        console.log(response);
        self.books = response.data;
      });
    }
  }
});

But when squeegee that one error happens

[Vue warn]: Error compiling template:

<div class="container" id="app">

    <div class="row">

      <center>
        <h1>BOOKS</h1>
        <button type="button" class="btn btn-danger" @click="getData">Get Data</button>
        <br><br>
        <div class="well">
          <input type="search" class="form-control" v-model="mySearch" placeholder="Search">
        </div>
      </center>
    </div>

    <div class="row">

      <table class="table">

        <thead>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Value</th>
            <th>Description</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="book in books | filterBy mySearch">
            <td>{{ book.id }}</td>
            <td>{{ book.title }}</td>
            <td>R$ {{ book.value }}</td>
            <td>{{ book.description }}</td>
          </tr>
        </tbody>

      </table>

    </div>

  </div>

- invalid expression: Unexpected identifier in

    books | filterBy mySearch

  Raw expression: v-for="book in books | filterBy mySearch"



(found in <Root>)
warn @ vue.js:584
compileToFunctions @ vue.js:10569
Vue$3.$mount @ vue.js:10759
Vue._init @ vue.js:4557
Vue$3 @ vue.js:4646
(anonymous) @ app.js:1

Does anyone know why this is happening?

vue.js

  • @wmsouza: 2.5.13, Vue-Resource: 1.4.0

  • @wmsouza does not work, the same error happens

1 answer

6


The filter in the v-for was removed from the version 2.0 of Vue. You can use Dados Computados and perform a filter:

computed: {
    searchBook() {
        return this.mySearch ? this.books.filter(book => {
            return book.title.includes(this.mySearch);
          })
        : this.books;
    }
}

In the v-for make the following change:

v-for="book in searchBook"

See working in codesandbox

Reference

Browser other questions tagged vue.js

You are not signed in. Login or sign up in order to post.