Question

下面是单文件Vue.js模板。 note对象作为道具传递给模板，并包含audio_length和id。

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

<script>
module.exports = {
    mounted: function() {
        console.log("mounted audioelement", this.note.id);
    },

    props: ['note'],

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

但是，当我加载组件时，计算出的audioURL会导致/notes/getAudio/undefined。显然，它在加载note属性之前运行。花括号内的代码被正确解释。如何将src属性绑定到正确计算的URL？

Answer 1

解决方案1（vue 2.x）

如果您想将对象属性作为道具传递，那么您必须使用v-bind指令，请参阅此处的docs。

我想在你的父组件中你有类似数据属性的东西：

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

然后将您的组件编写为：

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

在YourComponent.vue中：

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

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

解决方案2

将您的组件写为：

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

在YourComponent.vue中：

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

Answer 2

我认为无法正常工作，因为 audioURL 计算值会返回没有文件格式的路径。

尝试更改您的计算：

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

为了更好的调试，我建议你安装vue-devtools

Answer 3

感谢大家的帮助。事实证明，问题并非与Vuejs 本身有关。这是一个浏览器问题。即使实际修改了src元素，在您调用.load()

之前，它也不会更新元素的操作

所以，有效的解决方案如下：

<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>

然后，在脚本中：

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

为什么我的计算属性不计算？

3 个答案:

解决方案1（vue 2.x）

解决方案2