Хочу при клике на кнопку обратиться к полю image и вывести его как картинку, а не текст. Если обращусь в другому полю, например, к полю film, данные отобразятся. Значит проблема именно в привязке атрибута...Помогите пожалуйста. Очень срочно..
Не судите строго, новичок
new Vue({
el: '.movieApp',
data: {
randomMovie: null,
movies: [
{
film: "Мстители, 2012",
seen: true,
id: 1,
image: 'https://st.kp.yandex.net/images/film_iphone/iphone360_263531.jpg'
},
{
film: "Зеленая книга, 2018",
seen: false,
id: 2,
image: 'https://st.kp.yandex.net/images/film_iphone/iphone360_1108577.jpg?width=360?width=180'
},
{
film: "Аватар, 2009",
seen: false,
id: 3,
image: 'http://www.icanbecreative.com/res/freeweb/2011/04/avatar-photoshop-tutorial.jpg'
}
]
},
methods: {
random: function () {
console.log(this.randomMovie)
var rand = Math.floor(Math.random() * this.movies.length);
this.randomMovie = this.movies[rand].image
console.log(this.randomMovie)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="movieApp.css" rel="stylesheet">
</head>
<body>
<button v-on:click="random()">Рандом</button>
<div class="container">
<p>Посмотри сегодня:</p>
<span>{{ randomMovie }}</span>
<img
v-bind:src="this.movies.image"
alt='Постер'
>
</div>
</body>