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>
Related
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 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>
I am working on Vue.JS and I tried to use local-storage with it to save data. In my code, I can store and retrieve all data with local-storage except line-through effect. Here, I am trying to store actual boolean value of line-through effect in local-storage and want to retrieve that value on to-do list app.
<title>To Do List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
<style>
.taskDone {
text-decoration: line-through;
}
</style>
</head>
<body>
<div id="todo-list" class="container">
<div class="container col-sm-8 col-sm-offset-2">
<h1 class="text-center"> <big><b> To Do List </b> </big></h1>
<h5 class="text-center"> <span v-show="itemsTodo.length"> ({{ itemsTodo.length }} pending) </span></h5>
<div class="col-md-8">
<button v-if="state === 'default'" class="btn btn-primary" #click="changeState('edit') ">Add Item</button>
<button v-else class="btn btn-info" #click="changeState('default')">Cancel</button>
</div>
<br>
<br>
<div v-if="state === 'edit'" >
<div class="col-sm-4">
<input class='form-control' v-model="newItem" type="text" placeholder="Type here" #keyup.enter="saveItem" >
</div>
<div class="col-sm-4">
<input class="form-control" v-model="newdate" type="date" type="text"/>
</div>
<div class="col-sm-4">
<button class='btn btn-primary btn-block' v-bind:disabled="newItem.length === 0"#click= "saveItem">Save Item</button>
</div>
</div>
<br>
<br>
<ul type="none" class="list-group">
<li class="list-group-item" v-for="(item,index,date) in items" :class="{taskDone : item.completed}" >
<h4>
<input type="checkbox" v-model="item.completed" #click="item.completed = !item.completed">
<button class="btn btn-primary " #click.stop="removeitems(index)">× </button>
<b><i> {{ item.label }} {{ item.date }} </i></b></h4>
</li>
</ul>
<h2 v-if="items.length === 0">Nice Job! Nothing in TO DO LIST</h2>
<div class="col-sm-4">
<button class="btn btn-warning btn-block" #click="clearcompleted"> Clear Completed</button>
</div>
<div class="col-sm-4">
<button class="btn btn-danger btn-block" #click="clearAll"> Clear All</button>
</div>
</div>
</div>
2. Vue.JS code
<script src="https://unpkg.com/vue" ></script>
<script>
var todolist = new Vue({
el: '#todo-list',
data : {
state : 'edit',
header: 'To Do List',
newItem: '',
newdate: '',
items: [
{
label:'coffee',
completed:false,
date:'2019-06-20' ,
},
{
label:'tea',
completed:false,
date:'2019-06-19' ,
},
{
label:'milk',
completed:false,
date:'2019-06-19' ,
},
]
},
computed:{
itemsDone(){
return this.items.filter(items => items.completed)
},
itemsTodo(){
return this.items.filter(items =>! items.completed)
},
},
methods:{
saveItem: function(){
if (this.newItem != ''){
this.items.push({
label:this.newItem,
completed: false,
date : this.newdate,
});
this.newItem = '';
this.newdate = '';
}},
changeState: function(newState){
this.state = newState;
this.newItem = '';
this.newdate = '';
},
removeitems(index){
this.items.splice(index,1);
},
clearcompleted (){
this.items = this.itemsTodo;
},
clearAll: function(){
this.items = [ ];
},
},
mounted(){
console.log('App Mounted!');
if (localStorage.getItem('items')) this.items = JSON.parse(localStorage.getItem('items'));
},
watch: {
items:{
handler(){
localStorage.setItem('items',JSON.stringify(this.items));
},
},
},
});
</script>
I expect correct boolean value of line-through effect to be stored in local-storage. So that, appropriate effect will show on browser.
You are just watching items. If you change something in a item (in your case completed) the handler will not be called and your change is not stored.
You could use a "deep" watcher but i suggest to call your save logic whenever you changed something.
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 developed a website for the WeChat Platform . The fronted website runs well on my own iphone. But these website won't work on others' phone, or the WeChat Windows version. I found if I comment out the code which related with the vue-resource or axios, the whole page worked fine. If not, the whole js file will not work.
The html code as below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,user- scalable=no" />
<title>Kindle Binding</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<!-- <script
src="https://unpkg.com/vue-resource#1.1.2/dist/vue-resource.min.js"> </script> -->
</head>
<style>
body {<!--
min-height: 2000px; -->
width: 100%;
height: 100%;
overflow-x: hidden;
}
#register_form {
margin-top: 20px;
}
</style>
<body>
<div id="register">
<div class="navbar-fixed">
<nav>
<div class="nav-wrapper black">
<a href="#" class="brand-logo" style="margin-left: 20px">Kindle
Pocket</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>register</li>
<li>login</li>
</ul>
</div>
</nav>
</div>
<div class="container">
<!-- register form start -->
<div id="register_form" class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">account_circle</i> <input
id="icon_prefix" type="text" class="validate"
v-model="newUserInfo.userName" /> <label for="icon_prefix">Username</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">phone</i> <input
id="icon_telephone" type="tel" class="validate"
v-model="newUserInfo.phone"> <label for="icon_telephone">Phone</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i> <input id="icon_email"
type="email" class="validate" v-model="newUserInfo.email">
<label for="icon_email">Personal Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">lock</i> <input
id="icon_password" type="password" class="validate"
v-model="newUserInfo.emailPwd"> <label
for="icon_password">Personal Email Passcode</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<i class="material-icons prefix">email</i> <input
id="icon_kindle_email" type="email" class="validate"
v-model="newUserInfo.kindleEmail"> <label
for="icon_kindle_email">Kindle Email</label>
</div>
</div>
<button type="button" style="float: right; margin-right: 20px"
class="btn waves-effect waves-light black" #click="register">
<font color="white">register</font>
</button>
<button type="button" style="float: right; margin-right: 20px"
class="btn waves-effect waves-light black" #click="test">
<font color="white">test</font>
</button>
</form>
</div>
</div>
</div>
</body>
<script src="https://unpkg.com/vue#2.1.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="/js/vue/register.js"></script>
<script
src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"> </script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</html>
The js file as below:
/**
*
*/
var app = new Vue({
el: "#register",
data: {
registerUrl: "/KindlePocket/bindingData",
registerFlag: false,
newUserInfo: {
userName:'',
phone:'',
email:'',
emailPwd:'',
kindleEmail:''
}
},
methods: {
register: function() {
alert("entered the register function!")
if(this.newUserInfo.userName.trim() == ''
|| this.newUserInfo.phone.trim() == ''
|| this.newUserInfo.email.trim() == ''
|| this.newUserInfo.emailPwd.trim() == ''
|| this.newUserInfo.kindleEmail.trim() == '') {
alert("information uncompleted！");
return ;
} else {
alert("ready to register");
axios.post(this.registerUrl, this.newUserInfo,{
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (response) {
alert("register success");
})
.catch(function (error) {
alert("register failed");
});
}
// vue-resource
/*this.$http.post(this.registerUrl, this.newUserInfo, { emulateJSON: true })
.then((response) => {
console.log(response.data);
if(response.data.isBinded == 1) {
this.registerFlag = true;
alert("register success！");
}
})*/
},
test: function() {
alert('test function invoked!');
}
},
created: function() {
alert('created function invoked!');
}
})
On my own iphone, when I click the test or register button , the js code runs well and the request send to the backend successfully, But on other phone , even the test button won't work. If I comment out the else block in the register function , all the devices runs well. When I replace axios with vue-resource, the same situation appeared. I don't know why.