Error in vue.js filterBy

Question

Error in vue.js filterBy

Navigation

#1 by (5 votes)

0

I'm using vue.js in my application and would like to filter information with 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 squeeze this 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

asked by anonymous 27.02.2018 / 23:41

1 answer

SQL - Calculate percentage in same select How to compare a list of numeric values with another variable in Python

score 5 · Accepted Answer

The filter on v-for was removed from version < strong> 2.0 of Vue . You can use Computed Data and perform a filter:

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

No v-for make the following change:

v-for="book in searchBook"

See working at codesandbox

Reference

Computed Data and Observers