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.
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>
trying to scroll to the first error when submitting a form using Vue Validate for validation in bootstrap form (b-form)
I think you are looking for something like this-
const app = new Vue({
el:'#app',
data:{
errors:[],
name:null,
age:null,
movie:null
},
methods:{
checkForm:function(e) {
this.$refs.errorP.scrollIntoView();
if(this.name && this.age) return true;
this.errors = [];
if(!this.name) this.errors.push("Name required.");
if(!this.age) this.errors.push("Age required.");
e.preventDefault();
}
}
})
input,select {
margin-left: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<form id="app" #submit="checkForm" action="/something" method="post">
<div ref="errorP">
<p v-if="errors.length" >
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
</div>
<div style="height: 1000px;">
Scroll to the bottom to see the form
</div>
<p>
<label for="name">Name<label>
<input type="text" name="name" id="name" v-model="name">
</p>
<p>
<label for="age">Age<label>
<input type="number" name="age" id="age" v-model="age" min="0">
</p>
<p>
<label for="movie">Favorite Movie<label>
<select name="movie" id="movie" v-model="movie">
<option>Star Wars</option>
<option>Vanilla Sky</option>
<option>Atomic Blonde</option>
</select>
</p>
<p>
<input type="submit" value="Submit">
</p>
</form>
https://jsfiddle.net/anupdg/j24xt7rd/1/
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
Want to make a search bar in Bootstrap 3 with both the clear glypicon that only appears if there is text, AND the search glypicon that the user clicks to start their search.
I am close:
However, as you can see the x glyph occupies the same space as the search bar. If I try to just position the x farther to the left, it disappears behind the search bar.
My code is below:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:this.resources>
<xp:styleSheet href="/cc_CommonSearchBar.css" />
</xp:this.resources>
<div class="input-group" style="width:300px">
<!-- <div class="btn-group">-->
<input id="ccSearchInput" type="text" class="form-control"
placeholder="Search for..." />
<span id="ccSearchClear" class="glyphicon glyphicon-remove-circle" />
<span class="input-group-addon" id="basic-addon2">
<i class="glyphicon glyphicon-search" />
</span>
</div>
<xp:scriptBlock id="scriptBlock1">
<xp:this.value><![CDATA[$(document).ready(function(){
$("#ccSearchInput").keyup(function(){
$("#ccSearchClear").toggle(Boolean(this.value));
});
$("#ccSearchClear").toggle(Boolean($("#ccSearchInput").val()));
$("#ccSearchClear").click(function(){
$("#ccSearchInput").val("").focus();
$("#ccSearchClear").hide();
});
});]]></xp:this.value>
</xp:scriptBlock>
</xp:view>
And my CSS:
#ccSearchInput {
width: 200px;
}
#ccSearchClear {
position:absolute !important;
right:5px !important;
top:0 !important;
bottom:0 !important;
height:14px !important;
margin:auto !important;
font-size:14px !important;
cursor:pointer !important;
color:#ccc !important;;
}
I structured your HTML and JavaScript differently (positive note: reduces your CSS)
Let me know if this works ;)
$(document).ready(function() {
if ($("#ccSearchInput").val() === '') {
$("#clearBtn").hide();
}
$("#ccSearchInput").on('keyup', function() {
if ($(this).val() !== '') {
$("#clearBtn").show();
} else {
$("#clearBtn").hide();
}
});
$("#clearBtn").click(function() {
$("#ccSearchInput").val('').focus();
$(this).hide();
});
});
#basic-addon2:hover {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<hr/>
<div class="row" style="float:right">
<div class="col-xs-4">
<div class="input-group">
<input type="text" class="form-control" id="ccSearchInput" placeholder="Search for...">
<div class="input-group-addon" id="clearBtn"><i class="glyphicon glyphicon-remove-circle"></i>
</div>
<div class="input-group-addon" id="searchBtn"><i class="glyphicon glyphicon-search"></i>
</div>
</div>
<!-- <span class="" id="ccSearchClear"></span> -->
</div>
</div>