mirror of
https://github.com/owntone/owntone-server.git
synced 2025-04-01 02:03:45 -04:00
27e2274d8a
Reduces the number of Vue components that need to be created/managed. Instead of a Vue component for each item, we now only have one Vue component for the whole list of items.
44 lines
822 B
Vue
44 lines
822 B
Vue
<template>
|
|
<section>
|
|
<nav class="buttons is-centered fd-is-square" style="margin-bottom: 16px">
|
|
<a
|
|
v-for="char in filtered_index"
|
|
:key="char"
|
|
class="button is-small"
|
|
@click="nav(char)"
|
|
>{{ char }}</a
|
|
>
|
|
</nav>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'IndexButtonList',
|
|
|
|
props: ['index'],
|
|
|
|
computed: {
|
|
filtered_index() {
|
|
if (!this.index) {
|
|
return []
|
|
}
|
|
const specialChars = '!"#$%&\'()*+,-./:;<=>?@[\\]^`{|}~'
|
|
return this.index.filter((c) => !specialChars.includes(c))
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
nav: function (id) {
|
|
this.$router.push({ hash: '#index_' + id })
|
|
},
|
|
|
|
scroll_to_top: function () {
|
|
window.scrollTo({ top: 0, behavior: 'smooth' })
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style></style>
|