I want to implement a basic search and sort feature for a list in VuetifyJS. Check out this CodePen example of the list: https://codepen.io/anon/pen/bxGGgv
What is the recommended approach to achieve this in 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.'
}
]
}
},
}