I am new in Vue.js, I just want to make simple online web store model. I want if the button is clicked, the product is removed from items daftar array by activating tambahkan method then pushed into keranjang daftar array. Here is my full code, I really appreciate for all your responses. Thank you
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js | Excercises</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!-- HTML element -->
<h2>Computer Store</h2>
<div style="display: grid;grid-template-columns: auto auto;">
<!-- Left Column -->
<div id="items" style="width: 200px;margin: auto;">
<div v-for="item in daftar" style="margin: 10px;border: 1px solid gray;padding: 10px;mar">
<div>
<strong>{{ item.nama }}</strong>
</div>
<div>
Jumlah : <input type="number" v-model:value="item.jumlah" min="1" max="100" value="1">
</div>
<div>
Harga : {{ item.jumlah * item.harga }}
</div>
<div>
<button #click="tambahkan">Tambah ke keranjang</button>
</div>
</div>
</div>
<!-- Right Column -->
<div id="keranjang">
<ul>
<li></li>
</ul>
</div>
</div>
<!-- Vue Js Script -->
<script>
var items = new Vue({
el:"#items",
data:{
daftar : [
{'nama':'ram','jumlah': 1,'harga' : 12000},
{'nama':'cpu','jumlah': 1,'harga' : 15000},
{'nama':'hdd','jumlah': 1,'harga' : 22000},
{'nama':'monitor','jumlah': 1,'harga' : 2000},
{'nama':'mouse','jumlah': 1,'harga' : 65000},
{'nama':'ram2','jumlah': 1,'harga' : 12000},
{'nama':'cpu2','jumlah': 1,'harga' : 15000},
{'nama':'hdd2','jumlah': 1,'harga' : 22000},
{'nama':'monitor2','jumlah': 1,'harga' : 2000},
{'nama':'mouse2','jumlah': 1,'harga' : 65000}
]
},
methods:{
tambahkan:function(){
keranjang.list.push({'nama':this.ram,'jumlah': this.jumlah,'harga' : this.harga})
}
}
});
var keranjang = new Vue({
el:"#keranjang",
data:{
daftar: []
}
});
</script>
</body>
</html>
You were going right, you made 2 mistakes,
You did not pass the item to be added to the cart
You added "{'nama':this.ram,'jumlah': this.jumlah,'harga' : this.harga}" but this means entire vue object. which doesn't contain those properties
I've modified your code, and it works. Check below
var items = new Vue({
el:"#items",
data:{
daftar : [
{'nama':'ram','jumlah': 1,'harga' : 12000},
{'nama':'cpu','jumlah': 1,'harga' : 15000},
]
},
methods:{
tambahkan:function(item){
keranjang.daftar.push(item);
}
}
});
var keranjang = new Vue({
el:"#keranjang",
data:{
daftar: []
}
});
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<h2>Computer Store</h2>
<div style="display: grid;grid-template-columns: auto auto;">
<!-- Left Column -->
<div id="items" style="width: 200px;margin: auto;">
<div v-for="item in daftar" style="margin: 10px;border: 1px solid gray;padding: 10px;mar">
<div>
<strong>{{ item.nama }}</strong>
</div>
<div>
Jumlah : <input type="number" v-model:value="item.jumlah" min="1" max="100" value="1">
</div>
<div>
Harga : {{ item.jumlah * item.harga }}
</div>
<div>
<button #click="tambahkan(item)">Tambah ke keranjang</button>
</div>
</div>
</div>
<!-- Right Column -->
<div id="keranjang">
<ul>
<li v-for="item in daftar">
<strong>{{ item.nama }}</strong>
</li>
</ul>
</div>
</div>
Related
I want to toggle the accordion only with the icons to add a click event on the button. How do I do this? I have tried this--
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button #click="toggleTheme" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
User
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button #click="toggleTheme" class="accordion-button " type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
View
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>
In this snippet The toggle on icon is working but Click event on button does not work.
How do I do the accordion toggle on icon & click event on button separately?
I just split the button in two ways
<html>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<div id="app">
<div id="t_accordion">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header " id="headingOne">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">User</a>
</button>
</h2>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="d-flex bg-white mx-auto">
<a #click="toggleTheme">View</a>
</button>
</h2>
</div>
<div>
<div id="collapseOne" class="accordion-collapse collapse " aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>User Content</strong>
</div>
</div>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>View Content</strong>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Don't forget to include Vue from CDN! -->
<script src="https://unpkg.com/vue#2"></script>
<script>
new Vue({
el: '#app', //Tells Vue to render in HTML element with id "app"
data() {
return {
message: 'Hello World!'
}
},
methods:{
toggleTheme(){
// alert('clicked')
this.isActive = !this.isActive;
}
}
});
</script>
<style>
.accordion-button {
pointer-events:none;
}
.accordion-button::after {
pointer-events: all;
}
</style>
</html>
I tried to make the element 'branch' responsive aligned perfectly below 'status' when I tried to minimize the browser's window, how can I do that? This is what I've got so far result, I've also tried to use #media only screen CSS but still shows no sign of responsiveness, here's my lines of code
`
<template>
<base-header class="pb-4 pb-5 pt-6 pt-md-6 bg-gradient-success">
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1"
/>
<template>
<div>
<b-form inline>
<label for="status">Status⠀⠀⠀⠀ :</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<!-- branchstyle -->
<div class="branch">
<div class="col-lg-10 text-right">
<b-form inline label-align-sm="right" style="margin-left: 70px">
<div class="col-sm-2" label for="branch">Branch⠀:</div>
<div class="col-sm-8">
<b-form-input
v-model="text"
style="margin-left: 33px"
></b-form-input>
</div>
<br />
<!-- <div class="input-group col-sm-2">
<b-button variant="outline-dark"></b-button>
</div> -->
<!-- <div>
</div> -->
</b-form>
</div>
</div>
</b-form>
</div>
<div>
<b-form inline>
<label for="storecode">Store Code⠀:</label>
<div class="col-sm-2">
<b-form-input v-model="text"></b-form-input>
</div>
<div class="branch">
<div class="col-lg-12 text-right">
<b-form inline label-align-sm="right">
<div class="input-group col-sm-10">
<b-button
variant="dark"
style="margin-left: 205px; margin-top: 5px"
>Search</b-button
>
</div>
<!-- <div>
</div> -->
</b-form>
</div>
</div>
</b-form>
</div>
<br />
<br />
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<div class="text-center">
<b-table dark striped hover :items="items" :fields="fields"></b-table
><br />
</div>
</b-card>
</template>
</base-header>
</template>
<style></style>`
Thanks in advance and hope u have a nice day☺
I try to simulate your issue and implement this code snippet. Because I couldn't see your result in the code snippet, I assume that you want a responsive form that, when the screen minimizes, your inputs are placed into the right section.
I've done some cleaning and improvements for better readability, and I used flex for your responsive issue.
new Vue({
el: "#app",
data: function() {
return {
text: "a",
fields: ['first_name', 'last_name', 'age'],
items: [{
isActive: true,
age: 40,
first_name: 'Dickerson',
last_name: 'Macdonald'
},
{
isActive: false,
age: 21,
first_name: 'Larsen',
last_name: 'Shaw'
},
{
isActive: false,
age: 89,
first_name: 'Geneva',
last_name: 'Wilson'
},
{
isActive: true,
age: 38,
first_name: 'Jami',
last_name: 'Carney'
}
]
}
},
});
.customForm>div {
display: flex;
flex: 1 0 250px;
margin: 1rem;
}
.customForm {
display: flex;
flex-wrap: wrap;
}
.customForm > div > label {
flex: 1 0 auto;
align-items: flex-end;
display: flex;
margin-right: .5rem;
}
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form class="customForm">
<div>
<label>Status:</label>
<b-form-input v-model="text" />
</div>
<div>
<label>Branch:</label>
<b-form-input v-model="text" />
</div>
<div>
<label>Store Code:</label>
<b-form-input v-model="text" />
</div>
<div>
<b-button variant="dark">Search</b-button>
</div>
</b-form>
<b-card body>
<b-card-header class="border-0">
<h3 class="mb-0">Stock List</h3>
</b-card-header>
<div class="text-center">
<b-table dark striped hover :items="items" :fields="fields" />
</div>
</b-card>
</div>
I just started vue.js and I try to create a todo like application. The only difference is that for each element of the list, I have a child list. The main list works fine but the child list does not work. I try several hours to find what is wrong with my code but I can not solve the problem. Can someone tell me what I do wrong?
var app = new Vue({
el: "#app",
data: {
groups: []
},
methods: {
deleteGroup(group) {
const groupIndex = this.groups.indexOf(group);
this.groups.splice(groupIndex, 1);
},
createGroup() {
this.groups.push({
title: "",
listMode: 0,
properties: []
});
},
deleteProperty(group, property) {
const propertyIndex = properties.indexOf(group.properties, property);
group.properties.splice(propertyIndex, 1);
},
createProperty(group) {
group.properties.push({
name: "",
type: 0
});
}
}
});
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous"
/>
<script
src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="app" style="margin: auto; width: 600px;">
<div
v-for="(group, index) in groups"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Group Name :</label>
<input class="form-control" v-model="group.title" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">List Mode :</label>
<select class="form-control" v-model="group.listMode">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<div style="padding-left: 50px;">
<div
v-for="(property, Index2) in group.properties"
style=" border: 2px solid gray; margin-bottom: 20px;"
>
<div class="form-group">
<label class="control-label">Property Name :</label>
<input class="form-control" v-model="property.name" />
<span class="text-danger"></span>
</div>
<div class="form-group">
<label class="control-label">Type :</label>
<select class="form-control" v-model="peroprty.type">
<option value="0">Fields</option>
<option value="1">List of Fields</option>
</select>
<span class="text-danger"></span>
</div>
<!--
<button class='btn btn-success' v-on:click="deleteProperty(group, property)"><i class='trash icon'></i> Delete</button>
-->
</div>
<button class="btn btn-success" v-on:click="createProperty(group)">
Create Group
</button>
</div>
<button class="btn btn-success" v-on:click="deleteGroup(group)">
<i class="trash icon"></i> Delete
</button>
</div>
<button class="btn btn-success" v-on:click="createGroup()">
Create Group
</button>
</div>
</body>
You have a syntax error in your v-model currently with name: "peroprty"
<select class="form-control" v-model="peroprty.type">
Try update to "property"
Obs: You always can look on console/debug of chrome to see what kind error can be.
Especially when trying to do some event with: v-for, v-if, #click, and among others attrs of vue
I'd like to make default checked on radio buttons. Here is the code:
<ul v-for="p in myPhotos">
<li>
<div class="row">
<div class="col-sm-6">
<div>
Visibility: {{p.visible}}
</div>
<br>
<br>
<strong>Visiblity setting</strong><br>
<input type="radio" v-model="p.visible" name="visibility" value="all" :checked="p.visible == 'all'"> All <br>
<input type="radio" v-model="p.visible" name="visibility" value="fav" :checked="p.visible == 'fav'"> My favorites <br>
<input type="radio" v-model="p.visible" name="visibility" value="none" :checked="p.visible == 'none'"> No one
</div>
<div class="col-sm-6"><img class="img-responsive myphotos" v-bind:src="BASE_URL +'/uploads/' + userId + '/'+ p.imgId" /> </div>
</div>
</li>
</ul>
I followed this answer.
While see Visibility of each item being printed, the default is not checked as expected.
Here is the myPhotos which I receive from the server when the component is created:
[
{
"id" : "5bcebb6efeaea3147b7a22f0",
"imgId" : "12710.png",
"visible" : "all"
},
{
"id" : "5bcebbf0feaea3147b7a22f1",
"imgId" : "62818.png",
"visible" : "fav"
},
{
"id" : "5bcec010feaea3147b7a22f2",
"imgId" : "36740.png",
"visible" : "none"
}
],
What is wrong here and how can I fix it?
in your tried code you have only one radio buttons group with the same name visibility , in our case we need 3 groups so we need 3 different names , to do that we have to add i index to our v-for loop and bind each group name with that index like :name="'visibility'+i"
new Vue({
el: '#app',
data: {
myPhotos: [{
"_id": 1,
"imgId": "12710.png",
"visible": "all"
},
{
"_id": 2,
"imgId": "62818.png",
"visible": "fav"
},
{
"_id": 3,
"imgId": "36740.png",
"visible": "inv"
}
]
},
methods: {
change(e) {
// console.log(e.target.id)
e.target.disabled = true
}
}
})
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Vue.delete">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
</head>
<body>
<div id="app">
<ul v-for="p,i in myPhotos">
<li>
<div class="row">
<div class="col-sm-6">
<div>
Visibility: {{p.visible}}
</div>
<br>
<br>
<strong>Visiblity setting</strong><br>
<input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="all" :checked="p.visible == 'all'"> All <br>
<input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="fav" :checked="p.visible == 'fav'"> My favorites <br>
<input type="radio" v-model="myPhotos[i].visible" :name="'visibility'+i" value="none" :checked="p.visible == 'none'"> No one
</div>
<div class="col-sm-6"><img class="img-responsive myphotos" /> </div>
</div>
</li>
</ul>
</div>
</body>
I'm trying to change views on page load and on click events.
Here is what I have so far:
Vue.component('stale', {
template: '#stale-template'
});
Vue.component('buying', {
template: '#buying-template'
});
var vm = new Vue({
el: '.slot-container',
data: {
currentView: 'stale'
},
methods: {
buyTemplate: function(e) {
this.currentView = 'buying';
}
}
});
This is my HTML:
<div class="slot-container">
<component is="{{currentView}}"
v-transition="fade"
transition-mode="out-in">
</component>
</div><!-- END .SLOT-CONTAINER -->
<script id="stale-template" type="x-template">
STALE
<div class="slot stale">
<div class="row">
<div class="half">
<div class="buy-icon" v-on="click : buyTemplate">
<img src="{{ Asset.to('img/exchange/buy-icon.png') }}" alt="buy" />
<div class="title">Buy</div>
</div>
</div>
<div class="half">
<div class="sell-icon">
<img src="{{ Asset.to('img/exchange/sell-icon.png') }}" alt="sell" />
<div class="title">Sell</div>
</div>
</div>
</div>
</div>
</script>
<script id="buying-template" type="x-template">
BUYING
<div class="slot buying">
<div class="search">
<form action="{{ url_to('exchange/search') }}" method="post" id="buy-search" class="dark">
<input type="text" value="{{ input_old('item') }}" name="item" class="item-input" placeholder="Search item..." data-autocomplete="{{ url_to('search/item/autocomplete') }}" />
<button type="button" class="exchange-search-btn">Search</button>
</form>
</div>
<div class="results">
</div>
</div>
</script>
You can view the working example here: http://jsfiddle.net/4vgjx61t/
For some odd reason, I can never get anything to initiate to begin with. I'm following the example found here: http://vuejs.org/guide/application.html
Thank you.
You are using syntax valid in Vue 0.12 but are loading Vue 0.11 in the Fiddle. Add this as an external resource to fix it:
https://raw.githubusercontent.com/yyx990803/vue/dev/dist/vue.min.js