[Vuejs]-Why is my computed property not computing?

by

0👍

✅

Thanks for everyone’s help. It turns out that the problem isn’t really with Vuejs per se. It’s a browser issue. Even though the src element was actually modified, it doesn’t update the action of the element until you call .load()

So, the solution that worked was as follows:

<template>
<span v-show="note.audio_length > 0" class="audio-element-wrapper">
    <audio ref="player" controls preload="none">
        <source :src="audioURL" type="audio/webm">
        Your browser does not support the audio element.
    </audio>
<span>
</template>

And then, in the scripts:

updated: function() {
    this.audioURL = "/notes/getAudio/" + this.note.id;
    this.$refs.player.load();
},

0👍

Solution 1 (vue 2.x)

If you want to pass the object properties as a props then you have to use v-bind directive, see the docs here.

I suppose in your parent component you have something like that for data property:

data: function () {
  return {
    note: {
      audio_lenght: 100,
      id: 12
    }
  }

Then write your component as:

<your-component v-bind='note'></your-component>

And in YourComponent.vue:

...
props: ['id', 'audio_lenght']
...

computed: {
    audioURL: function() {
        return "/notes/getAudio/" + this.id;
    }
}

Solution 2

Write your component as:

<your-component :note='note'></your-component>

In YourComponent.vue:

props: {
  note: {
    type: Object
  }
},
computed: {
  audioURL: function() {
    return "/notes/getAudio/" + this.note.id;
  }
}

0👍

i suppose is not working because your audioURL computed value return a path without your file format.

try to change your computed:

computed: {
    audioURL: function() {
        return "/notes/getAudio/" + this.id + ".webm";
    }
}

For a better debug i advise you to install vue-devtools

Leave a comment