new Vue({
el: '#app1',
data: {
objects:[
{
object: {
title: 'C',
author: 'Denis',
publishedAt: '1960'
}
},
{
object: {
title: 'Vue',
author: 'Yet To Find',
publishedAt: '2010'
}
}]}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app1">
<ol>
<div v-for="object in objects">
{{index}}
<li v-for="value in object">
{{value}}
</li>
</div>
</ol>
</div>
new Vue({
el: '#app1',
data: {
objects:[
{
title: 'C',
author: 'Denis',
publishedAt: '1960'
},
{
title: 'Vue',
author: 'Yet To Find',
publishedAt: '2010'
}]}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app1">
<ol>
<div v-for="object in objects">
{{index}}
<li v-for="value in object">
{{value}}
</li>
</div>
</ol>
</div>
I am able to achieve these two variations. But I am trying to achieve the below
1.
.C
.Denis
.1960
2.
.
.
.
How can I do it from what I have? I am trying to express bullet/number by Dot(.).
new Vue({
el: '#app',
data: {
objects: [{
title: 'C',
author: 'Denis',
publishedAt: '1960'
},
{
title: 'Vue',
author: 'Yet To Find',
publishedAt: '2010'
}
]
}
})
/*ignore - hide snippets console */
.as-console-wrapper {
max-height: 0px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.js"></script>
<div id="app">
<ul>
<div v-for="(object, index) in objects">
{{ index + 1 }}
<li v-for="(value, key, index) in object" style="list-style-type:none">
{{ index + 1 }}. {{ key }} = {{ value }}
</li>
</div>
</ul>
</div>
Maybe so...
<ul v-for="(object,index) in objects"
:key="index">
{{index +1}}
<li v-for="(prop, index) in object" :key="index">
{{prop.author}}
{{prop.title}}
{{prop.publishedAt}}
</li>
</ul>
Related
the code:
shop.vue
<template>
<div class="shop">
<div class="products" v-for="Product in items" :key="Product.id" :Product="Product"
v-on:add-To-Cart="addToCart($event)">
<h1>{{ Product.name }}</h1> <img :src="Product.pic" width="400" /> <br>
{{ Product.description }} <br>
{{ "$" + Product.price }} <br>
<button class="addToCart" #click="$emit('add-To-Cart', Product)">Add to Cart</button>
</div>
</div>
</template>
<script>
import Product from '../db.json';
export default {
name: 'shop',
data() {
return {
items: Product
}
},
methods: {
addToCart(Product) {
this.Product=Product
console.log(this.Product)
}
}
}
</script>
when I click the add to cart button it is not logging the product to the console
how can I fix that? and implement a shopping cart to my website?
Custom events are emitted from vue components not from native html elements, the same for props, you can directly call the method addToCart from the click event handler :
<template>
<div class="shop">
<div class="products" v-for="Product in items" :key="Product.id" >
<h1>{{ Product.name }}</h1> <img :src="Product.pic" width="400" /> <br>
{{ Product.description }} <br>
{{ "$" + Product.price }} <br>
<button class="addToCart" #click="addToCart(Product)">Add to Cart</button>
</div>
</div>
</template>
<script>
import Product from '../db.json';
export default {
name: 'shop',
data() {
return {
items: Product
}
},
methods: {
addToCart(Product) {
this.items.push(Product)
console.log(this.items)
}
}
}
</script>
I have a modified the code a little bit without any stylings applied. Please check the below snippet
new Vue({
el: '#app',
data() {
return {
items: [{
name: 'aaa',
description: 'about aaa',
pic: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.taste.com.au%2Frecipes%2Fchocolate-cream-biscuits%2Fee3d0934-ccca-4fdf-8827-64f2fd2737e1&psig=AOvVaw1fEqbEmoJeGS0WmrnSy6pS&ust=1668580370820000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCICb2LbIr_sCFQAAAAAdAAAAABAD',
price: 12,
},
{
name: 'bbb',
description: 'about bbb',
pic: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.taste.com.au%2Frecipes%2Fchocolate-cream-biscuits%2Fee3d0934-ccca-4fdf-8827-64f2fd2737e1&psig=AOvVaw1fEqbEmoJeGS0WmrnSy6pS&ust=1668580370820000&source=images&cd=vfe&ved=0CBAQjRxqFwoTCICb2LbIr_sCFQAAAAAdAAAAABAD',
price: 12,
}],
cartItems:[],
};
},
methods: {
addToCart(item) {
this.cartItems.push({...item});
},
}
});
.products {
display: flex;
justify-content: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="products" v-for="product in items" :key="product.id">
<h1>{{ product.name }}</h1> <img :src="product.pic" width="400" /> <br>
{{ product.description }} <br>
{{ "$" + product.price }} <br>
<button class="addToCart" #click="addToCart(product)">Add to Cart</button>
</div>
</div>
I cannot get or display data from an API but the API is working fine and when I click the button, the data appears,
I want it to appear automatically
I'm using Axios method to connect to my API
I'm new to Vue.js and this is my simple code
var Ve = new Vue({
el: "#app",
data: {
products: [],
},
methods: {
getData: function(){
axios.get('http://localhost:8000/api/products')
.then(data => this.products = data.data)
.catch(err => console.log(err));
}
},
})
THIS IS WHERE I WANT TO DISPLAY MY DATA
<div class="col-sm-9 padding-right" id="app" >
<div class="features_items"><!--features_items-->
<h2 class="title text-center">المنتجات</h2>
<div class="col-sm-4" v-for="item in products">
<div class="product-image-wrapper">
<div class="single-products">
<div class="productinfo text-center">
<img src="images/products/2.jpeg" alt="" />
<h2>${{ item.price }}</h2>
<p>{{ item.name }}</p>
<i class="fa fa-shopping-cart"></i>أضف إلى السلة
</div>
<div class="product-overlay">
<div class="overlay-content">
<h2>${{ item.price }}</h2>
<p>{{ item.name }}</p>
<i class="fa fa-shopping-cart"></i>أضف إلى السلة
</div>
</div>
</div>
<div class="choose">
<ul class="nav nav-pills nav-justified">
<li><i class="fa fa-plus-square"></i>أضف إلى المفضلة</li>
</ul>
</div>
</div>
</div>
</div><!--features_items-->
<button type="button" #click="getData()">show</button>
</div>
I want it to appear automatically I'm using Axios method to connect to my API
As per my understanding, You want to bind the API data on component load. If Yes, You can call getData() method in the mounted() life cycle hook.
mounted hook used to run code after the component has finished the initial rendering and created the DOM nodes.
Demo :
var vm = new Vue({
el:"#app",
data: {
products: [],
},
mounted() {
this.getData();
},
methods: {
getData() {
// Here make an API call and bind the response in products.
this.products = [{
name: 'product1',
price: 50
}, {
name: 'product2',
price: 100
}, {
name: 'product3',
price: 150
}, {
name: 'product4',
price: 200
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<ul>
<li v-for="(item, index) in products" :key="index">{{ item.name }} - {{ item.price }}</li>
</ul>
</div>
v-if="!item.checked" is causing a problem. item.checked not defined. Property "item" was accessed during render but is not defined on instance.
Following the reference, this looks valid to me:
<li v-for="item in items" v-if="!item.checked">
Reference: https://vuejs.org/guide/essentials/list.html#v-for-with-v-if
<html>
<head>
<script src="https://unpkg.com/vue#3"></script>
</head>
<body>
<div id="app">
<ol v-if="hasItems">
<li v-for="item in items" v-if="!item.checked" :key="item.id">
<input type="checkbox" v-model="item.checked">
<label :style="{ textDecoration: item.checked ? 'line-through' : 'none' }">
{{ item.name }}
{{ item.checked }}
</label>
</li>
</ol>
<p v-else>List is empty</p>
<!-- v-else-if="" -->
<!-- v-else -->
<form #submit.prevent="addItem">
Add item:
<input type="text" v-model="newItem">
</form>
<p v-show="hasItems">
{{ totalAmountMessage }}
</p>
</div>
<script>
Vue.createApp({
data() {
return {
newItem: '',
items: [],
}
},
computed: {
totalAmountMessage() {
if (this.totalAmountOfItems === 1) {
return `${this.totalAmountOfItems} item in our list`
}
return `${this.totalAmountOfItems} items in our list`
},
hasItems() {
return this.totalAmountOfItems !== 0
},
totalAmountOfItems() {
return this.items.length
},
},
methods: {
addItem() {
this.items.push({
id: Math.random(),
name: this.newItem,
checked: false
})
this.newItem = ''
}
}
}).mount('#app')
</script>
</body>
</html>
From your link it says:
When they exist on the same node, v-if has a higher priority than v-for. That means the v-if condition will not have access to variables from the scope of the v-for
This can be fixed by moving v-for to a wrapping tag (which is also more explicit):
Example follows:
<template v-for="todo in todos">
<li v-if="!todo.isComplete">
{{ todo.name }}
</li>
</template>
I am creating a table using a ServerTable from 'vue-tables-2' to render a the data with axios and create a pagination, but the problem in the pagination the table show all the records together in the first page
I tried to fixe it but i didn't find any solution
Here you can find the component that i am using to create that table and the pagination
<template>
<div class="mt-5">
<div class="card-header purple-background bord-top-lr-5">
<h4 class="title-align font-montserrat text-light white-text-color">
{{ items.count + ' results found' }}
</h4>
</div>
<div class="card-body white-bg">
<div class="grid-x grid-padding-x m-2 border-0">
<div class="border-0 mb-2">
<v-server-table
url="/companies/search"
:columns="columns"
:options="options"
class="table-header"
>
<div slot="company_name" class="m-3" slot-scope="props">
<h5 class="title-align font-montserrat" style="color: #5b2557">
<a :href="props.row.url" :title="props.row.name">
{{ props.row.name }}
</a>
({{ $t('labels.frontend.companies.demontage') }})
</h5>
<div class="row">
<div class="col">
<p
class="gray-text-color font-montserrat-thin font-weight-bold"
>
{{ props.row.address.street }}
{{ props.row.address.building_nr }},
{{ props.row.address.postal }},
{{ props.row.address.city }}, {{ props.row.address.state }},
{{ props.row.address.country }}
</p>
</div>
<div class="col ml-lg-5">
<p
class="font-montserrat-thin blue-light-color font-weight-bold"
>
T. {{ props.row.address.phone }}<br />
<a
:href="props.row.website"
target="_blank"
:title="props.row.name"
class="gray-text-color"
>
{{ $t('labels.frontend.companies.goTo') }}
</a>
</p>
</div>
<div class="col ml-lg-5">
<a
class="font-montserrat-regular"
href="#"
style="color: #74aee0"
>
{{ $t('labels.frontend.companies.moreInfo') }} »
</a>
</div>
</div>
<button
class="mb-3 blue-light-bg btn bord-rad-5 white-text-color font-montserrat-regular"
href="#"
>
{{ $t('labels.frontend.companies.stock') }}
</button>
<br />
</div>
</v-server-table>
</div>
</div>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { ServerTable } from 'vue-tables-2'
Vue.use(ServerTable, {}, false, 'bootstrap4', 'default')
export default {
name: 'SearchCompaniesTable',
props: {
companyName: {
type: String,
required: false,
default: () => ''
}
},
data() {
return {
total: 0,
items: [],
columns: ['company_name'],
options: {
headings: {
remote_id: 'Document'
},
highlightMatches: true,
pagination: {
chunk: 10,
edge: true,
dropdown: false,
nav: 'fixed'
},
perPage: 10,
perPageValues: [10],
preserveState: true,
sortable: ['company_name'],
filterable: ['company_name'],
skin: 'table-bordered table-hover'
},
page: 1
}
},
computed: {
rows() {
return Object.keys(this.items).length
}
},
mounted() {
axios.get('/companies/search').then(response => {
this.items = response.data
})
}
}
Could you please check what mistake did i make?
I am using Framework 7 to load demo cards in the router. The problem is I am not sure how to loop through multiple records in the template display.
Here is my route
{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
// Requested route
// Get external data and return template7 template
app.request.json('data.json', function (data) {
console.log(data);
resolve(
// How and what to load: template
{
template: `<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">News</div>
</div>
</div>
<div class="page-content">
<div class="card demo-card-header-pic">
<div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
<div class="card-content card-content-padding">
<p class="date">{{Title}}</p>
<p>{{Header}}</p>
</div>
<div class="card-footer">Read more</div>
</div>
</div>
</div>`
},
// Custom template context
{
context: {
ID: data.content.ID,
Title: data.content.Title,
Header: data.content.Header,
Description: data.content.Description,
TitleImg: data.content.TitleImg,
},
}
);
});
}
},
here is sample json:
{
"contentType": "news",
"content": [{
"ID": 1,
"Title": "Test",
"Header": "Short Text",
"Description": "lorem ipsum",
"TitleImg": "/img/collab.jpg"
}, {
"ID": 2,
"Title": "Test2",
"Header": "Short Text2",
"Description": "lorem ipsum2",
"TitleImg": "/img/collab.jpg"
}]
}
Right now it doesn't show anything but I would like to see both entries.
TAKE 2 but still not working.... the items array has my data but the for loop doesnt work
{
path: '/about/',
async: function (routeTo, routeFrom, resolve, reject) {
// Requested route
// Get external data and return template7 template
app.request.json('data.json', function (data) {
for (var i = 0; i < data.content.length; i++) {
items.push({
ID: data.content[i].ID,
TitleImg: data.content[i].TitleImg,
Title: data.content[i].Title,
Header: data.content[i].Header
});
}
console.log(items);
resolve(
{
template: `<div class="page">
<div class="navbar">
<div class="navbar-inner sliding">
<div class="left">
<a href="#" class="link back">
<i class="icon icon-back"></i>
<span class="ios-only">Back</span>
</a>
</div>
<div class="title">News</div>
</div>
</div>
<div class="page-content">
<div class="card demo-card-header-pic" v-for="item in items">
<div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"></div>
<div class="card-content card-content-padding">
<p class="date">{{Title}}</p>
<p>{{Header}}</p>
</div>
<div class="card-footer">Read more</div>
</div>
</div>
</div>`
},
{
items: items,
}
);
});
}
},
EDIT - Working solution thanks #djiggy
{{#each items}}
<div class="card demo-card-header-pic">
<a href="/about/{{ID}}/">
<div style="background-image:url({{TitleImg}})" class="card-header align-items-flex-end"><div class="card-headerTxt">{{Title}}</div></div>
<div class="card-content card-content-padding">
<p>{{Header}}</p>
</div>
</a>
</div>
{{/each}}
When you use data as Template7, you have to use Template7 syntax (cf. expressions syntax section)
So in your case, you have to update v-for to each block
Useful link : Access to object with each