Merazsohel/vue bazar list

## vue bazar list
	<!DOCTYPE html>
	<html>
	<head>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
	</head>
	<body>

	<div id="app" class="container mt-5">
		<h3 class="text-center">Bazar List</h3>

		<form @submit.prevent="addItem">
			<input class="form-control col-4 offset-4 mt-3" v-model="newItem">
		</form>

		<ul class="list-group mt-3 col-md-4 offset-4">
			<li v-for="(item,index) in items" :key="" class="list-group-item">
				{{ item.name }} - <input v-model="item.price">

				<button class="btn btn-xs btn-danger" @click="removeItem(index)">-</button>
			</li>
			<li class="list-group-item">Total - {{ total }}</li>
		</ul>
	</div>

	<script>
		new Vue({
			el: '#app',
			data:{
				items: [
					{ name: 'rice', price: 12.50 },
					{ name: 'fish', price: 15.50 },
					{ name: 'oil', price: 22.50 },
				],
				newItem: ""
			},
			computed:{
				total(){
					var total = 0
					this.items.forEach(item => {
						total += parseFloat(item.price)
					});

					return total;
				}
			},
			methods:{
				addItem(){
					this.items.push({
						name: this.newItem,
						price: 0.0
					})
				},
				removeItem(index){
					this.items.splice(index, 1)
				}
			}
		})
	</script>
	</body>
	</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
	</head>
	<body>

	<div id="app" class="container mt-5">
	<h3 class="text-center">Bazar List</h3>

	<form @submit.prevent="addItem">
	<input class="form-control col-4 offset-4 mt-3" v-model="newItem">
	</form>

	<ul class="list-group mt-3 col-md-4 offset-4">
	<li v-for="(item,index) in items" :key="" class="list-group-item">
	{{ item.name }} - <input v-model="item.price">

	<button class="btn btn-xs btn-danger" @click="removeItem(index)">-</button>
	</li>
	<li class="list-group-item">Total - {{ total }}</li>
	</ul>
	</div>

	<script>
	new Vue({
	el: '#app',
	data:{
	items: [
	{ name: 'rice', price: 12.50 },
	{ name: 'fish', price: 15.50 },
	{ name: 'oil', price: 22.50 },
	],
	newItem: ""
	},
	computed:{
	total(){
	var total = 0
	this.items.forEach(item => {
	total += parseFloat(item.price)
	});

	return total;
	}
	},
	methods:{
	addItem(){
	this.items.push({
	name: this.newItem,
	price: 0.0
	})
	},
	removeItem(index){
	this.items.splice(index, 1)
	}
	}
	})
	</script>
	</body>
	</html>