How to show/hide a button if the value in the array is empty?

Question

Is there a way to hide this button if the value of path_15 is empty?

<button class="mr-2 border border-[#fff] p-2 hover:bg-[#5a5a5a] hover:bg-opacity-50 rounded-lg text-xs" 
@click="useSong.loadSong_15()">15s</button>

I am using this to load the src file. However, some tracks in the array have no url stored in path_15 and that's why I want the button to be hidden if this is the case. Thanks in advance.

loadSong_15(){

    if (this.audio && this.audio.src) {
        this.audio.pause()
        this.isPlaying = false}
    this.audio = new Audio()
    this.audio.src = ''
    this.audio.src = this.currentTrack.path_15
    setTimeout(() => {
        this.isPlaying = true
        this.audio.play()
    }, 200)
},

Answer 1

Yes, by using v-if or v-show

<button v-if="currentTrack.path_15 != null && currentTrack.path_15 != undefined && currentTrack.path_15 != ''" ... >15s</button>

You can also create a computed property for this:

computed: {
    isPath15Empty() {
       return this.currentTrack.path_15 == null || this.currentTrack.path_15 == undefined || this.currentTrack.path_15 == '';
    } 
}

and then

<button v-if="!isPath15Empty" ...