为什么我计算的属性没有计算？

Question

下面是一个单文件 Vue.js 模板。 note 对象作为 prop 传递给模板，包括 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 属性之前运行。 curly 大括号内的代码被正确解释。如何将 src 属性绑定到正确计算的 url?

Answer 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 计算值 return 没有你的文件格式的路径。

尝试改变你的计算：

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();
},

为什么我计算的属性没有计算？

Why is my computed property not computing?

vue.js

computed-properties

vue-component

vuejs2

解决方案一（vue 2.x）

解决方案 2

为什么我计算的 属性 没有计算？

Why is my computed property not computing?

vue.js

computed-properties

vue-component

vuejs2

解决方案一（vue 2.x）

解决方案 2

为什么我计算的属性没有计算？