CODEWITHSUNDEEP
vuejs2
El Hombre Sin Nombre
El Hombre Sin Nombre

Reputation: 3092

Vue2 list with filter

I´m trying to make a foreach loop in a table with a input filter in Vue2. This works but i need to create a filter.

The input code is

<div class="form-group">
     <input v-model="search" class="form-control" placeholder="Search shortcut...">
</div>

The loop is

<tr v-for="edition in editions" >
     <td></td>
     <td class="alert alert-success">{{ edicion.intellij }}</td>
     <td class="alert alert-info">{{ edicion.eclipse }}</td>
     <td>{{ edicion.descripcion }}</td>
 </tr>

QUESTION UPDATE

This is js (Vue) code. In this code 'editions' have only one element, but in real case have more than one element.

new Vue({
    el: '#app',
    data: {
        search: '',
  editions: [{
            intellij: "Ctrl + Espacio",
            eclipse: "Ctrl + Espacio",
            description: "Autocompletado de código (clases, métodos, variables)"
    }],
},

});

Now, ¿how can i make the input text can filter 'editions'?

Upvotes: 0

Views: 332

Answers (1)

nickford
nickford

Reputation: 792

I'm not 100% sure I know what you're asking, but it sounds like you want to use the text input as a search field that will filter the array.

https://codepen.io/nickforddesign/pen/YYpZYe?editors=1010

As the value of this.search changes, the computed value will filter the array, and if the field is empty, it will just return the array.

<div class="app">
  <input type="text" v-model="search">
  <table>
    <tbody>
      <tr v-for="(edition, index) in matches" :key="index">
        <td></td>
        <td class="alert alert-success">{{ edition.intellij }}</td>
        <td class="alert alert-info">{{ edition.eclipse }}</td>
        <td>{{ edition.description }}</td>
      </tr>
    </tbody>
  </table>

And the js:

new Vue({
  el: '.app',
  data() {
    return {
      search: '',
      editions: [{
        intellij: "Ctrl + Espacio",
        eclipse: "Ctrl + Espacio",
        description: "Autocompletado de código (clases, métodos, variables)"
      }, {
        intellij: "Ctrl + C",
        eclipse: "Ctrl + C",
        description: "Copiar"
      }, {
        intellij: "Ctrl + V",
        eclipse: "Ctrl + V",
        description: "Pegar"
      }]
    }
  },
  computed: {
    matches() {
      return this.search
        ? this.editions.filter(edition => {
          let match = false
          for (let key in edition) {
            if (edition[key].toLowerCase().includes(this.search.toLowerCase())) {
              return true
            }
          }
        })
        : this.editions
    }
  }
})

Upvotes: 1

Related Questions