Can I ask for help? How do you bind an image to a vue or simply put, how do you render an image from the array to vue? I will show you my code and How I have done it and explain it carefully to you.
Inside my template, I have this UL that displays 3 items inside my array. I wanted to retrieve my images from the array that I created on my javascript code.
<ul class="list-rendering">
<li v-for="item in items" v-bind:key="item">
<v-card style="padding: 10px;">
<div class="img-cont">
<v-img :src="require('#/assets/section/about.jpg')"></v-img>
</div>
<div class="text-cont">
<br>
<base-subheading>{{ item.name }}</base-subheading>
<h5>{{ item.price }}</h5>
</div>
</v-card>
</li>
</ul>
export default {
data () {
return {
items: [
{
img: "#/assets/section/about.jpg",
name: "Cuppy Cake",
price: "$20.00"
},
{
img: "#/assets/section/social.jpg",
name: "Red Velvet Cake",
price: "$4.99"
},
{
img: "#/assets/section/testimonials.jpg",
name: "Carrot Cake",
price: "$3.00"
}
]
}
}
}
Try This...
<ul class="list-rendering">
<li v-for="item in items" v-bind:key="item">
<v-card style="padding: 10px;">
<div class="img-cont">
<img :src="item.img" alt="loading...">
</div>
<div class="text-cont">
<br>
<base-subheading>{{ item.name }}</base-subheading>
<h5>{{ item.price }}</h5>
</div>
</v-card>
</li>
</ul>
Try this
<ul class="list-rendering">
<li v-for="item in items" v-bind:key="item">
<v-card style="padding: 10px;">
<div class="img-cont">
<v-img :src="require(item.img)"></v-img>
</div>
<div class="text-cont">
<br>
<base-subheading>{{ item.name }}</base-subheading>
<h5>{{ item.price }}</h5>
</div>
</v-card>
</li>
</ul>
You need require(ITEM.IMG) to render the image if you are using an alias.
If you are using relative path then you can straight away use :src="item.img"
Related
I'm fetching some content with Axios, looping over an array of objects, and trying to display a few elements with different background colors, but I can't make it work.
This is what I got so far:
<template>
<div class="container">
<div v-for="card in cards" :key="card.id" class="list">
<div class="card-container" v-if="card.id == 1234 || 1236">
<div class="card-container" v-bind:style="background">
</div>
<div class="card">
<p class="card-title">{{ card.title }}</p>
</div>
<div class="card">
<p class="card-short">{{ card.short }}</p>
<router-link to="">See more</router-link>
</div>
</div>
</div>
</div>
</template>
import axios from 'axios';
export default {
name:'Test',
data(){
return {
cards: Object,
background:{
backgroundColor:'red'
}
}
},
What the object looks like
} "cards":[
{"id": 1237,"name": "Card 1", bg_color:"green"},
{"id": 1236,"name": "Card 2", bg_color:"yellow},
{"id": 1234,"name": "Card 3", bg_color:"red},
{"id": 1233,"name": "Card 4", bg_color:"blue},
] here
Because your content is not inside your card-container which you have styled.
<template>
<div id="app">
<div class="container">
<div v-for="card in cards" :key="card.id" class="list">
<div class="card-container" v-if="card.id == 1234 || 1236">
<div class="card-container" v-bind:style="background">
<div class="card">
<p class="card-title">{{ card.title }}</p>
</div>
<div class="card">
<p class="card-short">{{ card.short }}</p>
<router-link to="">See more</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
I'm building a page where the user can expend categories like an accordion.
I've been helped so for and I'm still trying to dismiss the fog here.
I'm having this issue with my slots :
'v-slot' directive must be owned by a custom element, but 'div' is not.
I've been checking the doc, but I can't seem to understand much...
<div v-for="(filteredArticles, categoryKey) in groupedCategories" :key="categoryKey" class="l">
<Item>
<template #title>
<a> {{ categoryKey }} </a>
</template>
<div v-for="article in filteredArticles" :key="article.slug">
<template #content> <!-- here is the issue -->
<p> bonjour monde</p>
<img :src="require(`assets/${article.img}`)" alt="">
</template>
</div>
</Item>
</div>
I've nested the template #content inside a div in order to dynamically fetch from an array.
Here is Item.vue
<template>
<div class="wrapper">
<div
:class="{ active: isActive }"
#click="toggle"
>
<a class="title">
<slot name="title" />
</a>
<div v-show="show" :class="{ active: isActive }" class="content">
<slot name="content" />
</div>
</div>
</div>
</template>
I have a querystring like this:
https://someurl.com?q=test
And I have a component like so:
Vue.component('externalrecipes', {
props: ['results'],
template: `
<section>
<div class="" v-for="result in results">
<div class="card card-similar card-external text-center">
<img :src="result.image_url" />
<div id="meta" class="text-center">
<h5>{{ result.title }}</h5>
<a target="_blank" :href="'https://www.wine-searcher.com/find/' + q + '/1/uk'" role="button">Buy Wine</a>
</div>
</div>
</div>
</section>
`
})
However, this isn;t working. I want to be able to pass the value of 'q' in the querystring to this line of code:
<a target="_blank" :href="'https://www.wine-searcher.com/find/' + q + '/1/uk'" role="button">Buy Wine</a>
How would I go about doing that?
You have to define the q variable within the component context. You can do so with props (set the value upon component instantiation) but in your use case it would make sense to retrieve its value from the result object used through the v-for.
Check the following snippet for both 'query in props' and 'query in result' examples.
You have to know/define where this query value come from. Your results items or the parent component
Vue.component('externalrecipes_props', {
props: ['results', 'query'],
template: `
<section>
<div v-for="result in results">
<div class="card card-similar card-external text-center">
<img :src="result.image_url" />
<div id="meta" class="text-center">
<h5>{{ result.title }}</h5>
<a target="_blank" :href="'https://www.wine-searcher.com/find/' + query + '/1/uk'" role="button">Buy Wine</a>
</div>
</div>
</div>
</section>
`
});
Vue.component('externalrecipes_result', {
props: ['results'],
template: `
<section>
<div class="" v-for="result in results">
<div class="card card-similar card-external text-center">
<img :src="result.image_url" />
<div id="meta" class="text-center">
<h5>{{ result.title }}</h5>
<a target="_blank" :href="'https://www.wine-searcher.com/find/' + result.query + '/1/uk'" role="button">Buy Wine</a>
</div>
</div>
</div>
</section>
`
});
new Vue({
el: '#app',
});
.card {
display: flex;
margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<p>Include query in props</p>
<externalrecipes_props :results="[
{
title: 'Some result',
image_url: 'https://via.placeholder.com/100'
}]" query="merlot" />
</div>
<div>
<p>Include query in results items</p>
<externalrecipes_result :results="[
{
title: 'Some result',
image_url: 'https://via.placeholder.com/100',
query: 'merlot'
}]" />
</div>
</div>
Am cycling through an array inside of an array of objects as:
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="Features.value in oe.oeBenefits.Features">{{ Features.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
</div>
My JSON code returns the following, but getting that value just isn't happening despite changes. Here is the JSON returned:
"oeBenefits": [
{
"planId": "l0t3AlfKV%2fETUaQd0zZJGA%3d%3d",
"benefitTypeId": 1,
"benefitName": "Health Care FSA",
"isHsaAvailable": false,
"benefitMin": 0,
"benefitMax": 3510,
"numberOfContributions": 12,
"carryoverAmount": null,
"isDebitCard": true,
"is100percent": true,
"isGracePeriod": true,
"allowDirectDeposit": true,
"claimsRunout": 90,
"employerSeed": "Your employer will contribute additional funds to your benefit",
"learnMoreUrl": "http://www.naviabenefits.com/participants/benefits/health-care-fsa/",
"Features": [
{
"key": "0",
"value": "Navia Benefits Card"
},
{
"key": "2",
"value": "FlexConnect"
},
{
"key": "4",
"value": "Online claim submission"
},
{
"key": "5",
"value": "Online card swipe substantiation"
}
]
},
All the other repeated data from the object(s0 return just fine, just this features part where I want just the value, not the key.
this should resolve your problem for you
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
The problem is with your inner loop you are not using the correct array object
You should do <li ng-repeat="Features in oe.oeBenefits.Features">{{ Features.value }}</li> instead of <li ng-repeat="Features.value
you have a nested ng-repeat, so in your case your ng-repeat should look this
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>
Here is my HTML code
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="showData($index)" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-repeat="field in Data" >
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>
I want to show the col-md-8 div data based on index selected from the field.name from col-md-4 list group.
Here is my Sample Data
{
"scenarios": [{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
}],
"description": "",
"name": "Some name "
}
The name is displayed on the left (in col-md-4)and the corresponding data has to be shown on the right(in col-md-8).
But I can't figure out how to do it. Any help ?
declare a scope varible to store selected index, depend on selected index show other div,
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-show="selectedIndex == $index" ng-repeat="field in Data">
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>
If you only are going to display one field object, I would just do the following:
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item"
ng-click="selectedField = field"
ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<!-- only if one is selected -->
<div ng-if="selectedField">
<div class="panel panel-primary"
<!-- get data from 'selectedField' -->
ng-repeat="scenario in selectedField.scenarios track by $index">
<!-- other stuff -->
</div>
</div>
</div>