переменная vuejs в атрибуте html

поэтому я пытаюсь установить src элемента в переменную js и его просто не работает. Я пробовал несколько способов, и я не могу заставить его работать. Вот один из способов

<source src="{{ this.show.podcastUrl }}" type="audio/mpeg">

Я тоже пробовал

<source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg">

и

<source :src="{{ this.show.podcastUrl }}" type="audio/mpeg">

что я делаю не так? Вот мой компонент

<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            {{ this.show.name }}
            <div class="pull-right">
                {{ this.show.number }}
            </div>
        </div>
        <div class="panel-body">
            <ul>
                <li>Air Date: </li>
                <li>
                    <audio controls>
                        <source v-bind:src="{{ this.show.podcastUrl }}" type="audio/mpeg">
                    </audio>
                </li>
            </ul>
        </div>
    </div>
</template>


<script>
    export default {
        mounted() {
            console.log(this.show);
        },

        props: {
            show: {
                type: Object,
                required: true
            }
        }
    }
</script>

1 ответов


это потому, что вы используете усы в директиве v-bind, которая не разрешена.

усов {{}} в VueJS связаны с шаблоном,v-bind передается в JS - поэтому усы как часть template engine не допускаются в