view image in an HTML page using Vue - javascript

<main id="meals">
<h3 style="text-align: center;">Week 1 - Day 1</h3>
<h6>{{mealType}} ( {{selectedItems}}/{{maxSelection}} selected )</h6>
<div class="grid">
<div v-for="item in d1w1" :key="item.id" class="option">
<div class="optionImg">
<img src={{item.pic}} width="100%" height="100%" />
</div>
<div class="optionDetails">
<h4>{{item.name}}</h4>
<p>{{item.desc}}</p>
</div>
</div>
</div>
</main>
hi everyone, I'm trying to render an images you can see in the code above as well as other components. everything is working fine except for the image. I am not sure why.
here is the code in my main.js file
const app = Vue.createApp({
data() {
return {
d1w1: [
{id: 001, name: 'arabic breakfast', desc: 'arabic food with keto bread', pic: './assets/logo_green.png'},
{id: 002, name: 'keto crackers', desc: 'cheese and keto crackers', pic: './assets/logo_green.png'},
{id: 003, name: 'meat shawarma', desc: 'shawrma with tahini sauce', pic: './assets/logo_green.png'},
{id: 004, name: 'ejjah', desc: 'light omelet arab version', pic: './assets/logo_green.png' },
],
mealType: 'light meal',
selectedItems: 0,
maxSelection: 2,
}
},
})

Use
<img :src="item.pic" width="100%" height="100%" />
Working Fiddle

Related

How to specify bootstrap accordion for data from API in vue js

I'm trying to create an order feed using accordion elements from bootstrap-vue and I am struggling with making only one element opened when I press it.
I've tried changing ids which are from api, but have no result.
HTML:
<div v-for="el in APIData" :key="el.id" >
<div class="accordion" role="tablist" :id="el.id">
<b-card no-body class="mb-1" :id="el.id">
<b-card-header header-tag="header" class="p-1" role="tab" :id="el.id">
<b-button block v-b-toggle.accordion-1 variant="dark">{{ el.name }}. Deadline: {{ el.deadline }} Price: <strong>{{ el.price }}</strong></b-button>
</b-card-header>
<b-collapse id="accordion-1" accordion="my-accordion" role="tabpanel" >
<b-card-body>
<b-card-text>
<div> <p> <strong>Posted:</strong> {{ el.date_posted }}. <br />{{ el.description }}</p> </div>
<a class= "button btn btn-dark">More</a>
</b-card-text>
</b-card-body>
</b-collapse>
</b-card>
</div>
</div>
Script:
<script>
import axios from 'axios'
export default {
name: 'Orders',
data () {
return {
APIData: [],
}
},
created () {
axios
.get('/api/v1/orders/')
.then(response => {
this.APIData = response.data
console.log(response.data)
})
.catch(err => {
console.log(err)
})
},
}
</script>
Example of data:
[
{
price: "179",
id: "1",
date_posted: "04_04_2022",
description: "some desc bla bla bla",
name: "some name",
deadline: "04_06_2022"
},
{
price: "189",
id: "2",
date_posted: "05_04_2022",
description: "another desc bla bla bla",
name: "some name",
deadline: "05_06_2022"
},
{
price: "199",
id: "3",
date_posted: "06_04_2022",
description: "another desc bla bla bla",
name: "some name",
deadline: "06_06_2022"
},
]
Again, I need to get opened only one accordion but get three instead e.g. because it seems to bootstrap that it is all one element.
You can simply achieve that by concatenating the el.id in the v-b-toggle attribute and the accordion id as well.
Working Demo :
new Vue({
el: '#app',
data: {
APIData: [{
id: 1,
name: 'Accordion 1'
}, {
id: 2,
name: 'Accordion 2'
}]
}
})
#app {
padding: 20px;
height: 350px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.22.0/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.22.0/dist/bootstrap-vue.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/css/bootstrap.min.css"/>
<div id="app">
<div v-for="el in APIData" :key="el.id" >
<p>
<b-btn v-b-toggle="`collapse-${el.id}`" variant="primary">Toggle {{ el.name }}</b-btn>
</p>
<b-collapse :id="`collapse-${el.id}`">
<b-card>
Collapse {{ el.name }} contents Here
</b-card>
</b-collapse>
</div>
</div>

Vue.js send data to a child component and display them

Hi I'm beginning with vue.js and I don't understand why my infos are not sent to the child component. I tried several differents things and it's not working. I think I'm not that far but I can't figure it out :
App.vue
<template>
<div class="app">
<Header/>
<div class="row">
<div class="col-3">
<Services v-bind:services="services"></Services>
</div>
</div>
</div>
</template>
<script>
import Header from "./components/Header.vue";
import Services from "#/components/Service";
export default {
nam: 'App',
components: {
Services,
Header,
},
data: function () {
return {
services: [{
title: "Logo flatdesign",
description: "Je fais de super flatdesign",
image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/22527722/original/3b5876ffb817872561d9eba6788dced76cb78224.jpg",
price: 6.7,
rate: 4,
id:1
},{
title: "Logo rapide",
description: "Je fais vite un logo",
image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/142024147/original/2abc0f9433df4f98790707a591772e56bf8777a1.jpg",
price: 5.5,
rate: 3,
id:2
},{
title: "Logo flatdesign",
description: "Je fais de super flatdesign",
image: "https://fiverr-res.cloudinary.com/t_gig_cards_web_x2,q_auto,f_auto/gigs/22527722/original/3b5876ffb817872561d9eba6788dced76cb78224.jpg",
price: 6.7,
rate: 4,
id:3
}]
}
}
}
</script>
<style>
</style>
Service.vue
<template>
<div class="home">
<div class="row">
<div class="col-3" v-for="service in services" v-bind:key="service.id">
<div class="jumbotron">
<img :src="service.image" height="100%" width="100%">
<h4>
{{service.title}}
</h4>
<div class="row">
<div class="col rate">
{{service.rate}} ★
</div>
<div class="col price">
{{service.price}} €
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
</script>
<style scoped>
.rate{
color: yellow;
}
.price{
font-weight: bold;
}
</style>
Thank you so much for your help :) !
Add this to your child component's script to define the passed prop before using it:
export default {
name: "Service",
props: ['services']
};

Bootstrap Vue Dynamic table templating

I am working with Bootstrap Vue JS table component to create a datatable:
https://bootstrap-vue.js.org/docs/components/table
I am new to VueJS and am uncertain on how to approach this problem which makes searching for a solution even more complicated.
I use an API endpoint to return JSON data:
{
"options":{
"filter":false
},
"fields":[
{
"key":"id",
"label":"Id",
"editLink":false,
"display":true,
"sortable":true,
"class":"shrink"
},
{
"key":"name",
"label":"Name",
"editLink":true,
"display":true,
"sortable":true
}
],
"data":[ ]
}
Here is my table template:
<b-table striped hover bordered foot-clone class="table-sm"
:items="users" :fields="displayedFields" :per-page="perPage" :current-page="currentPage" :filter="filter"
#filtered="onFiltered"
>
<template v-for="(field, index) in fields">
<template slot="{{field.key}}" slot-scope="row" v-if="field.editLink">
<router-link :to="'/user/' + row.item.id" v-bind:key="index"></router-link>
</template>
</template>
<template slot="status" slot-scope="row">
<toggle-button :width="36" :height="18" v-model="row.status" :labels="false" :colors="{checked: '#00FF00', unchecked: '#FF0000', disabled: '#CCCCCC'}"/>
</template>
</b-table>
The first template tag is an attempt from a wild guess. I want to be able to conditionally select a table for a column from the fields config. You can see in my attempt that I want to put a RouterLink when the field's config editLink is true.
How can I get this done?
If you're using version 2.0.0 or newer of bootstrap-vue you need to change the slot names as
they've changed, and the old vue slot has also been deprecated in favor for v-slot.
I changed the accepted answers fiddle to work with the new naming and v-slot
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<link href="https://unpkg.com/bootstrap#4.3.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.0.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.0.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" v-slot:[`cell(${field.key})`]="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>
Here's a jsfiddle showing dynamic columns with a b-table:
https://jsfiddle.net/nardnob/wvk6fxgt/
new Vue({
el: "#app",
data: {
fields: [{
key: "id",
label: "Id",
colType: "span"
}, {
key: "name",
label: "Name",
colType: "button"
}, {
key: "uhh",
label: "uhh..",
colType: "idk"
}],
items: [{
id: 0,
name: "Test 0"
}, {
id: 1,
name: "Test 1"
}, {
id: 2,
name: "Test 2"
}]
}
});
<div id="app">
<b-table :items="items" :fields="fields">
<template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
<div v-if="field.colType === 'button'">
<h5>{{data.item.name}}</h5>
<b-button>Am Button</b-button>
</div>
<div v-else-if="field.colType === 'span'">
<h5>{{data.item.name}}</h5>
<span>Am Span</span>
</div>
<div v-else>
<h5>{{data.item.name}}</h5>
Am Confused
</div>
</template>
</b-table>
</div>

Knockout.js {{each}} not listing items in javascript template

I've created a simple app that should iist each item from a model in a list, created using a javascrit template.
Fiddle
Html:
<div id="tagsList" class="box">
<div class="box-head">
<h2 class="left">Tags</h2>
</div>
<div class="box-content">
<input type="text" placeholder="Add New Tag" />
<button>+ Add</button>
<div data-bind="template: 'tagsTempl'"></div>
</div>
</div>
<script id="tagsTempl" type="text/html">
<ul>
{{each tags}}
<li class="tagItem">
<span>${Name}</span>
<div>
Edit
Delete
</div>
</li>
{{/each}}
</ul>
</script>
Javascript:
$(function () {
//$("#tagDialog").hide();
var data = [
{ Id: 1, Name: "Ball Handling" },
{ Id: 2, Name: "Passing" },
{ Id: 3, Name: "Shooting" },
{ Id: 4, Name: "Rebounding" },
{ Id: 5, Name: "Transition" },
{ Id: 6, Name: "Defense" },
{ Id: 7, Name: "Team Offense" },
{ Id: 8, Name: "Team Defense" }
];
var viewModel = {
tags: ko.observableArray(data),
tagToAdd: ko.observable(""),
addTag: function() {
this.tags.push({ Name: this.tagToAdd() });
}
}
ko.applyBindings(viewModel)
});
Output of list:
{{each tags}}
${Name}
Edit Delete
{{/each}}
The scripts file is accessible through viewing source. I'm not sure where my error is. Any help?
I updated your fiddle. Now it is working like you want it to: The list of tags is being rendered using the knockout standard method as described in the docs.
HTML
<ul data-bind="template: {name: 'tagsTempl', foreach: tags}"></ul>
Template
<script id="tagsTempl" type="text/html">
<li class="tagItem">
<span data-bind="text: Name"></span>
<div>
Edit
Delete
</div>
</li>
</script>
Also I connected the viewmodel to the view.
For example:
<button data-bind="click: addTag">+ Add</button>
You simply forgot most of it. I suggest you follow the interactive tutorials on how to do this.

How do I get Angular.js and Mixitup.js to work together

There is a great tut which illustrates how to accomplish this, however I can't seem to get it right. Here is the example and here is my take on it. And even stranger I am not getting any errors in the console.
Here is the HTML from my project locally.
<div ng-controller="DrawingsController">
<div class="controls">
<label>Filter:</label>
<button class="filter" data-filter="all">All</button>
<button class="filter" data-filter=".category-{{category}}" ng-repeat="category in categories">{{category}}</button>
<label>Sort:</label>
<button class="sort" data-sort="myorder:asc">Asc</button>
<button class="sort" data-sort="myorder:desc">Desc</button>
</div>
<div class="test">
<div id="MixItUpContainer1" class="container">
<div class="mix category-{{drawing.category}}" data-myorder="{{drawing.value}}" ng-repeat="drawing in drawings">Value : {{drawing.name}}</div>
</div>
</div>
<div class="gap"></div>
<div class="gap"></div>
</div> <!-- end of DrawingsController -->
JS:
rustyApp.controller('DrawingsController', function DrawingsController($scope) {
$scope.categories = ['Soft', 'Elements'];
$scope.drawings = [{
category: 'Elements',
value: '1',
source: 'http://placehold.it/350x150'
}, {
category: 'Elements',
value: '1',
source: 'http://placehold.it/350x150'
}, {
category: 'Elements',
value: '2',
source: 'http://placehold.it/350x150'
}, {
category: 'Soft',
value: '2',
source: 'http://placehold.it/350x150'
}, {
category: 'Soft',
value: '3',
source: 'http://placehold.it/350x150'
}];
});

Categories