<template>
<div>
<table>
<tr>
<td>商品编号</td>
<td><input type="text" v-model.number="id"></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" v-model.number="title"></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" v-model.number="price"></td>
</tr>
<tr>
<td colspan="2"><button @click="addCart">加入购物车</button></td>
</tr>
</table>
<table>
<thead>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.price }}</td>
<td><button>-</button> {{ book.count }} <button>+</button>></td>
<td>金额</td>
<td><button>删除</button></td>
</tr>
</tbody>
</table>
<span>总价:¥0.00</span>
</div>
</template>
<script>
export default {
data() {
return {
id: null,
title: '',
price: '',
quantity: 1
}
},
computed: {
books() {
return this.$store.state.items;
}
},
methods: {
addCart() {
this.$store.commit('pushItemToCart', {
id: this.id,
title: this.title,
price: this.price,
count: this.quartity
})
this.id = '';
this.title = '';
this.price = '';
}
}
};
</script>
<template>
<div>
<table>
<tr>
<td>商品编号</td>
<td><input type="text" v-model.number="id"></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" v-model="title"></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" v-model="price"></td>
</tr>
<tr>
<td>数量</td>
<td><input type="text" v-model.number="quantity"></td>
</tr>
<tr>
<td colspan="2"><button @click="addCart">加入购物车</button></td>
</tr>
</table>
<table>
<thead>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.price }}</td>
<td>
<button :disabled="book.count===0" @click="increment({id: book.id, count: -1})">-</button>
{{ book.count }}
<button @click="increment({id: book.id, count: 1})">+</button>
</td>
<td>{{ itemPrice(book.id) }}</td>
<td><button @click="deleteItem(book.id)">删除</button></td>
</tr>
</tbody>
</table>
<span>总价:¥{{ totalPrice }}</span>
</div>
</template>
<script>
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
data(){
return {
id: null,
title: '',
price: '',
quantity: 1
}
},
computed: {
/* books(){
return this.$store.state.items;
} */
...mapState('cart', {
books: 'items'
}),
...mapGetters('cart', {
itemPrice: 'cartItemPrice',
totalPrice: 'cartTotalPrice'
})
},
methods: {
...mapMutations('cart', {
addItemToCart: 'pushItemToCart',
increment: 'incrementItemCount'
}),
...mapMutations('cart', [
'deleteItem'
]),
...mapActions('cart', [
'addItemToCart'
]),
addCart(){
//this.$store.commit('pushItemToCart', {
/* this.addItemToCart({
id: this.id,
title: this.title,
price: this.price,
count: this.quantity
}) */
//this.$store.dispatch('addItemToCart', {
this.addItemToCart({
id: this.id,
title: this.title,
price: this.price,
count: this.quantity
})
this.id = '';
this.title = '';
this.price = '';
}
}
};
</script>
<style scoped>
div {
width: 800px;
}
table {
border: 1px solid black;
width: 100%;
margin-top: 20px;
}
th {
height: 50px;
}
th, td {
border-bottom: 1px solid #ddd;
text-align: center;
}
span {
float: right;
}
</style>
为什么数量那里总是出来一个1
<template>
<div>
<table>
<tr>
<td>商品编号</td>
<td><input type="text" v-model.number="id"></td>
</tr>
<tr>
<td>商品名称</td>
<td><input type="text" v-model.number="title"></td>
</tr>
<tr>
<td>商品价格</td>
<td><input type="text" v-model.number="price"></td>
</tr>
<tr>
<td>数量</td>
<td><input type="text" v-model.number="quantity"></td>
</tr>
<tr>
<td colspan="2"><button @click="addCart">加入购物车</button></td>
</tr>
</table>
<table>
<thead>
<tr>
<th>编号</th>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="book in books" :key="book.id">
<td>{{ book.id }}</td>
<td>{{ book.title }}</td>
<td>{{ book.price }}</td>
<td><button :disabled="book.count===0" @click="increment({id: book.id, count: -1})">-</button>
{{ book.count }}
<button @click="increment({id: book.id, count: 1})">+</button></td>
<td>{{ itemPrice(book.id) }}</td>
<td><button @click="deleteItem(book.id)">删除</button></td>
</tr>
</tbody>
</table>
<span>总价:¥{{ totalPrice }}</span>
</div>
</template>
<script>
import { mapMutations, mapState, mapGetters, mapActions } from 'vuex'
export default {
data() {
return {
id: null,
title: '',
price: '',
quantity: ''
}
},
computed: {
...mapState('cart', {
books: 'items'
}),
...mapGetters('cart', {
itemPrice: 'cartItemPrice',
totalPrice: 'cartTotalPrice'
})
},
methods: {
...mapMutations('cart', {
addItemToCart: 'pushItemToCart',
increment: 'incrementItemCount'
}),
...mapMutations('cart', [
'deleteItem'
]),
...mapActions('cart', [
'addItemToCart'
]),
addCart(){
this.addItemToCart({
id: this.id,
title: this.title,
price: this.price,
count: this.quantity
})
this.id = '';
this.title = '';
this.price = '';
}
}
};
</script>
<style scoped>
div {
width: 800px;
}
table {
border: 1px solid black;
width: 100%;
margin-top: 20px;
}
th {
height: 50px;
}
th, td {
border-bottom: 1px solid #ddd;
text-align: center;
}
span {
float: right;
}
</style>