Saya mencoba membuat loop foreach dalam tabel dengan filter input di Vue2. Ini berfungsi tetapi saya perlu membuat filter.

Kode masukannya adalah

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

Lingkarannya adalah

<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>

PERBARUI PERTANYAAN

Ini adalah kode js (Vue). Dalam kode ini 'edisi' hanya memiliki satu elemen, tetapi dalam kasus nyata memiliki lebih dari satu elemen.

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

});

Sekarang, bagaimana saya bisa membuat teks input dapat memfilter 'edisi'?

0
El Hombre Sin Nombre 24 Desember 2017, 01:21

1 menjawab

Jawaban Terbaik

Saya tidak 100% yakin saya tahu apa yang Anda tanyakan, tetapi sepertinya Anda ingin menggunakan input teks sebagai bidang pencarian yang akan memfilter array.

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

Saat nilai this.search berubah, nilai yang dihitung akan memfilter array, dan jika kolom kosong, itu hanya akan mengembalikan 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
    }
  }
})
1
nickford 24 Desember 2017, 04:45