[Vuejs]-Vue doesn't update when data changes

by

0👍

✅

Working version:
Had to use asyncData instead of fetch.

<template>
  <div>
    <audio controls>
      <source :src="soundfile" type="audio/mp3" />
    </audio>
    <span>{{ soundfile }}</span>
  </div>
</template>

<script>
const axios = require("axios").default;

export default {
  async asyncData(context) {
    const ip = await axios.get(
      "somebackend/?soundfile=" + context.query.soundfile
    );

    return {
      soundfile: ip.data[0].file.url
    };
  }
};
</script>

0👍

You need to tell the audio tag that the load is complete.

If you don’t know nuxt well, but say it’s similar to vue
Whenever this.recording changes using watch, you can run .load() on the aduio tag.

for example.

<audio controls ref='player'>

this.$watch('record', () => {
                this.$refs.player.load()
            })

-1👍

I think one major thing you missed out on was adding the methods block:

export default {
  data() {
    return {
      key: 0,
      recording: ""
    };
  },
  methods: {
    async fetch(context) {
      const ip = await axios.get(
        "somebackend/?soundfile=" + context.query.soundfile
      );
      this.recording = ip.data[0].file.url;
      console.log(this.recording); // gives me the correct url/mp3 file
      this.key++; // should update the audio element and the span but doesn't
    }
  },
};
</script>

Since its not in the methods block, the reference to this is not what you are expecting i.e. the vue instance. Hence, the key is not updating and it gets logged to the console but since its not bound to the vue instance, changes do not reflect in the template.

Regards

Leave a comment