<template>
<div>
<div v-if="item">
<h1>Price: {{ item.email }}</h1>
<v-if item.email=="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="670d080f0927000a060e0b4904080a">[email protected]</a>">
<img :src="../"/>
</v-if>
</div>
</div>
</template>
<script>
import { routerid } from "./routerid";
export default {
name: "User",
components: {},
data() {
return {
item: [],
};
},
mounted() {
this.loadData();
},
computed: {
routeId() {
return this.$route.params.id;
},
},
watch: {
routeId() {
console.log("Reload (route change)");
this.loadData();
},
},
methods: {
loadData() {
console.log("Reloading, ID", this.routeId);
if (!this.routeId) return;
routerid(this.$route.params.id).then((item) => {
this.item = item.data;
});
},
},
};
</script>How can I conditionally load locally stored images in Vuejs?
I currently have three images stored in the assets folder: https://i.sstatic.net/8yUYJ.png
On the frontend, I want to call these images conditionally. For example, if the email is [email protected], then display the John image stored in the assets folder. Otherwise, do not display it. The same applies to the other images for Derk and Kate.
Do I need to use if-else conditions to load the images based on the email, or is there another way to achieve this?
Code example: https://codesandbox.io/s/combined-logic-api-forked-nzzzwc?file=/src/components/User.vue
API response:
{"address":{"geolocation":{"lat":"-37.3159","long":"81.1496"},"city":"kilcoole","street":"new road","number":7682,"zipcode":"12926-3874"},"id":1,"email":"[email protected]","username":"johnd","password":"m38rmF$","name":{"firstname":"john","lastname":"doe"},"phone":"1-570-236-7033","__v":0}
Note: The email will vary for each ID.