<div id="app">
<form action="#">
<label v-for="(image, index) in images">
<input type="radio" name="witch" :value="index" v-model.number="indexOfImage"> {{image.name}}
</label>
</form>
<div class="image">
<h3>{{images[indexOfImage].name}}</h3>
<img :src="images[indexOfImage].src" alt="">
</div>
</div>
.image {
border: 1px solid #000;
display: inline-flex;
flex-direction: column;
padding: 15px;
margin: 10px;
img {
max-width: 250px;
height: auto;
}
h3 {
margin: 0 0 5px 0;
}
}
View Compiled
const app = new Vue({
el: '#app',
data: {
images: [
{src: 'https://i.pinimg.com/564x/c6/5c/33/c65c33c15d9bc91ca228df382a2198b2.jpg',
name: 'Triss'},
{src: 'https://dc-marvel.ru/wp-content/themes/polygon/cache/webp/9af6784092a930b7b7fc8df3e33214c0.webp',
name: 'Yennefer'}
],
indexOfImage: 0
}
})
This Pen doesn't use any external CSS resources.