Amnesiac

仕事でちょっと詰まった箇所の健忘録。

Veu3でアイテム絞り込みのテスト

<div id="test">
<input type="text" v-model="keyword">
<table>
<tr v-for="user in filteredUsers" :key="user.id">
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
</tr>
</table>
<script>
const test = Vue.createApp( {
data()
{
return {
keyword: "",
users: [
{
id: 1,
name: 'りんご',
email: 'apple@test.com'
},
{
id: 2,
name: '犬',
email: 'dog@test.com'
},
{
id: 3,
name: 'タコ',
email: 'octopus@test.com'
},
{
id: 4,
name: 'いのしし',
email: 'wildboar@test.com'
},
{
id: 5,
name: 'ぶどう',
email: 'grape@test.com'
},
]
};
},
computed: {
filteredUsers()
{
const keyword = this.keyword.toLowerCase();
return this.users.filter( user =>
{
const nameMatch = user.name.toLowerCase().includes( keyword );
const emailMatch = user.email.toLowerCase().includes( keyword );
return nameMatch || emailMatch;
} );
}
}
} );
test.mount( '#test' );
</script>
</div>

っていうコードで、解説は下記

inputに入力した値で、name値とemail値を含むtrが双方向バインディングで出力される、というシンプルなものですが、vueを基礎勉強していくならこの手の簡単なものを理解して、書いていくのが良さそうに思います。