You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
765 B
40 lines
765 B
<script setup>
|
|
import { onMounted, ref } from 'vue'
|
|
|
|
const songs = ref([])
|
|
|
|
onMounted(async ()=>{
|
|
const response = await fetch(import.meta.env.VITE_PRACTICE_TRACKER_API_URL+'songs')
|
|
songs.value = await response.json()
|
|
})
|
|
const copy = (title) => {
|
|
navigator.clipboard.writeText(title);
|
|
}
|
|
const paste = (title) => {
|
|
alert(title)
|
|
}
|
|
</script>
|
|
<template>
|
|
<h2>Songs</h2>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>id</th>
|
|
<th>title</th>
|
|
<th>notes</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="song in songs">
|
|
<td>{{song.id}}</td>
|
|
<td>
|
|
{{song.title}}
|
|
<button @click="copy(song.title)">Copy</button>
|
|
<button @click="paste(song.title)">Paste</button>
|
|
</td>
|
|
<td>{{song.notes}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</template>
|