我刚刚完全空白。
我尝试了很多方法，但总是遇到问题或无用的代码。只需要朝着正确的方向插入
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport width=device-width initial-scale,1.0">
<title>Furniture Shop</title>
<link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous">
<script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous"></script>
<link rel = "stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<script src = "https://unpkg.com/vue"></script>
How do i use vue.js to make a cart without anything like node.js? i am trying to keep it simple but i have confused myself.
<!-- gallery First -->
<!-- Add To Cart Second -->
<div id="myList">
</div>
<div id="gallery" v-for="(image, index) in data" :key="image.id"> >
<div class="container">
<div class="card">
<div class="row">
<img :src="image" width=400px height=auto class="col-md-3">
<div class="col-md-12">
<p>{{}}</p>
<!-- id -->
<!-- name -->
<!-- price -->
<!-- description -->
<!-- image -->
<!-- add to basket button -->
</div>
</div>
</div>
</div>
</div>
</div>
below is my vue object. i want each item to display as a card with an add to cart button
<script>
new Vue({
el: '#gallery',
data: [
{id : 1, name : 'Double King Sized Bed', image : '/images/beds/bigWhiteBed.jpg', price : 20000, description : 'A double king sized bed with a white interior and a black cover'},
{id : 2, name : 'Queen Sized Bed with Storage Drawers', image : '/images/beds/darkDrawerBed.jpg', price : 15000, description : 'A queen sized bed with a dark storage drawer'},
{id : 3, name : 'King Sized Bed', image : '/images/beds/fancyBed.jpg', price : 12000, description : 'A king sized bed with a white interior and a black cover'},
{id : 4, name : 'Pine King', image : '/images/beds/fancyPineBed.jpg', price : 8000, description : 'A twin sized bed with a white interior and a black cover'},
{id : 5, name : 'Queen Sized Bed', image : '/images/beds/royalBed.jpg', price : 15000, description : 'A queen sized bed with a white interior and a black cover'},
{id : 6, name : 'Glass coffee table', image : '/images/coffee/glassCoffeeTable.jpg', price : 3000, description : 'Stylish Glass Coffee table'},
{id : 7, name : 'Wooden coffee table', image : '/images/coffee/whiteCoffeeTable.jpg', price : 2000, description : 'White Coffee table'},
{id : 8, name : 'Wooden Coffee Table on wheels', image : '/images/coffee/whitewheelCoffeeTable.jpg', price : 3000, description : 'Easy To Move coffee table'},
{id : 9, name : 'Two Piece Coffee table set', image : '/images/coffee/yellowCoffeeTableSet.jpg', price : 2000, description : 'Two tables One Price'},
{id : 10, name : 'Large Black Leather L-Shaped home Cinema Couch', image : '/images/couches/blackLshape.jpg', price : 30000, description : 'Stylish Black Leather L-Shaped home Cinema Couch '},
{id : 11, name : 'White Leather reading Lounger', image : '/images/couches/fancyChair.jpg', price : 30000, description : 'Single seated Reading chair'},
{id : 12, name : 'Black and white Home office desk', image : '/images/desks/blackAndWhiteDesk.jpg', price : 2000, description : 'A Stylish Work Station'},
{id : 13, name : 'Large L-Shaped Work Station', image : '/images/desks/LshapeOffice.jpg', price : 4000, description : 'A spacious Corner Unit Desk'},
{id : 14, name : 'Combined Leisure and Home Office Station', image : '/images/desks/officeBed.jpg', price : 13000, description : 'Combine work, relaxation and Play'},
{id : 15, name : 'Truss Table styled desks', image : '/images/desks/trussTableOfficeDesk.jpg', price : 1500, description : 'Easy to assemble and move'},
{id : 16, name : 'Jet Black Chair', image : '/images/misc/blackChair.jpg', price : 1000, description : 'A chair for any Environment'},
{id : 16, name : 'Dinning Room Table', image : '/images/misc/whiteDiningRoomTable.jpg', price : 10000, description : 'Dining Room Table for the family'},
],
methods: {
addToCart: function(id) {
console.log(id);
}
}
});
</script>
</body>
最佳答案
您应该更改数据对象。单独制作 order数组，您可以将您的 sku 项目推送到其中。数据对象中的所有内容都是响应式(Reactive)的。因此，当进行任何更改时，每个突变都会直接显示。更多关于这个的文档:https://v2.vuejs.org/v2/guide/reactivity.html
此外，数据对象在 View 和实例中公布，因此您可以使用没有 data 的键。直接在您的模板中。与可用作键的计算方法名称相同。您也可以将每个键用作监视方法名称。
我希望这会为您指明正确的方向:
<template>
<div id="gallery">
<div v-for="item in skus" :key="item.id">
<div @click="addToCart(item)">Order {{ item.name }}</div>
</div>
<div v-if="total">
<b>Total in cart: {{ total }}</b>
<div v-for="item in order" :key="item.id">
<div>{{ item.name }}</div>
</div>
</div>
</div>
</template>
<script>
new Vue({
el: '#gallery',
computed: {
total () {
return this.order.length;
}
},
data () {
return {
order: [],
skus: [
{id : 1, name : 'Double King Sized Bed', image : '/images/beds/bigWhiteBed.jpg', price : 20000, description : 'A double king sized bed with a white interior and a black cover'},
{id : 2, name : 'Queen Sized Bed with Storage Drawers', image : '/images/beds/darkDrawerBed.jpg', price : 15000, description : 'A queen sized bed with a dark storage drawer'},
{id : 3, name : 'King Sized Bed', image : '/images/beds/fancyBed.jpg', price : 12000, description : 'A king sized bed with a white interior and a black cover'},
// ....
],
}
},
mounted () {
// we could fill this.skus array with data from a json file/api call...
},
methods: {
addToCart: function(item) {
// Note: This will insert the sku as reference,
// so when the skus are changed, the ordered item
// will change with it. If you want a separate copy
// of the item, you should clone the item object
// before pushing it to the order array
this.order.push(item);
}
},
watch: {
total () {
console.log(this.total, this.order);
}
}
});
</script>
关于javascript - 我如何从这个 vue.js 对象创建购物车，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68626294/