単純な検索と並べ替え機能を追加する必要がありますVuetifyJSリスト。 リストのCodePenの例を次に示します。https://codepen.io/anon/pen/bxGGgv
VueJS 2でこれを行う標準的な方法は何ですか?
HTML:
<v-list two-line>
<template v-for="(item, index) in items">
<v-list-tile
:key="item.title"
avatar
ripple
@click="toggle(index)"
>
<v-list-tile-content>
<v-list-tile-title>{{ item.title }}</v-list-tile-title>
<v-list-tile-sub-title class="text--primary">
{{ item.headline }}
</v-list-tile-sub-title>
<v-list-tile-sub-title>{{ item.subtitle }}</v-list-tile-sub-title>
</v-list-tile-content>
</v-list-tile>
<v-divider
v-if="index + 1 < items.length"
:key="index"
></v-divider>
</template>
</v-list>
JS:
export default {
data () {
return {
selected: [2],
items: [
{
action: '15 min',
headline: 'Brunch this weekend?',
title: 'Ali Connors',
subtitle: "I'll be in your neighborhood doing errands this weekend. Do you want to hang out?"
},
{
action: '18hr',
headline: 'Recipe to try',
title: 'Britta Holt',
subtitle: 'We should eat this: Grate, Squash, Corn, and tomatillo Tacos.'
}
]
}
},
}
- 解決した方法 # 1
- 解決した方法 # 2
これは標準的な方法ではないかもしれませんが、このように試すこともできます...
最初にvモデル
search
を追加して、検索の入力をフィルター処理します および配列searchItem
。また、searchItem
を初期化する必要があります の中にマウントされた 針。次に作成する計算されたプロパティfilteredItems
。正規表現を使用して配列を返す場合の柔軟性のために、.match()とともに.filter()を使用しました。ただし、.includes()を使用することもできます。これは選択に依存します
HTML(変更)
<v-toolbar> <v-text-field v-model="search" //add this ... ></v-text-field> </v-toolbar> <v-list two-line> <template v-for="(item, index) in filteredItems"> //change items to filteredItems ... </template> </v-list>
JS:
data () { return { search: '', selected: [2], searchItem: [], items: [ // your items here ] } }, mounted() { setTimeout(() => this.searchItem = this.items) }, computed: { filteredItems() { return this.searchItem.filter((item) =>{ return item.title.toLowerCase().match(this.search) || item.headline.toLowerCase().match(this.search) || item.subtitle.toLowerCase().match(this.search) || item.action.toLowerCase().match(this.search) }) } }
デモ:
更新されたCodepenはこちら
関連した質問
- javascript - Vuex StoreはTypescriptクラスに未定義です
- javascript - 不明なTypeError:未定義の[VueJs]のプロパティ 'getCroppedCanvas'を読み取れません
- javascript - 「プロパティまたはメソッドがインスタンスで定義されていないが、レンダリング中に参照されています」というエラーを修正できません。
- javascript - ビルド時に空白のページを表示するvue-router
- javascript - Vuejs:JSON APIデータがクリックイベントに表示されない
- javascript - 入力値をv-for内に入力します
- javascript - 1つのlodashスロットル機能を持つvuejs複数の単一ファイルコンポーネント
- javascript - windowlocationがlocalStorageからトークンを削除しました
- javascript - jsファイルをHTTP GETして「エクスポート」変数を抽出するにはどうすればよいですか?
- javascript - VuetifyJSツールバーは、固定小道具が追加されるとすぐにコンテンツをオーバーレイします
クラスで計算プロパティを定義し、フィルターを実行できます。この計算されたプロパティを次のように使用できます。フィルタリング そして仕分け 関数。
コペン