<template>
<form class="questionnaire-result" action="#">
<h1 class="h1">Here are your result!</h1>
<div class="grid-container">
<h2 class="sub-club"> Sub-Club</h2>
<h2 class="score"> Score</h2>
<h2 class="join-que"> Want to Join?</h2>
<div class="sub-club-section " v-for="(subclub) in subclubs" :key="subclub.id">
<div class="responsive">
<div class="gallery">
<img class="image" :src="subclub.path">
<div class="desc">{{subclub.name}}</div>
</div>
</div>
<h3 v-if="subclub.score>50" class="score-result" style="color:#0cf12a ">{{subclub.score}}%</h3>
<h3 v-else class="score-result" style="color:red ">{{subclub.score}}%</h3>
<div v-if="subclub.score>50">
<input class="join-btn option-input " type="checkbox" v-bind:value="subclub.name" v-model="selected_subclubs" >
</div>
</div>
{{selected_subclubs}}
<button @click=" goToHomePage()" class="button "><span> JOIN </span></button>
</div>
</form>
</div>
</template>
<script>
export default {
name:"QuestionnaireResult",
data(){
return{
selected_subclubs:[],
subclubs:[
{
id:1,
name:"Yoga",
score:70,
path:"@/assets/sub-clubs-images/Yoga_mini.jpeg",
},
]
}
},
methods:{
goToHomePage(){
this.$router.push("/");
}
}
}
</script>
I apply it like this , I put the path in the data to company src. It worked this way for many people. but I cannot put the image on the page . It works when I pass the path directly to the src as a string.I can't understand how I can't get the path.Can you help me.
I tried to do it like this: Vue.js image v-for bind
