We Keep Coding

Unable to pick-up date using v-calendar

I would like to use v-calendar to pick up dates in a textarea in my Laravel application.
If I follow the official documentation and use the code to use v-calendar from CDN, I can pick up the date from v-calendar.
However, if I use the same code to set the vue-component to pick up the dates from v-calendar, I cannot pick up the dates.
official document:
https://vcalendar.io/examples/datepickers.html
datepick.blade.php in case CDN
<script>
new Vue({
el: '#cal',
data: {
days: [],
date: "",
},
computed: {
dates() {
return this.days.map(day => day.date);
},
attributes() {
return this.dates.map(date => ({
highlight: true,
dates: date,
}));
},
},
methods: {
onDayClick(day) {
const idx = this.days.findIndex(d => d.id === day.id);
if (idx >= 0) {
this.days.splice(idx, 1);
} else {
const date = this.date;
if(date === "") {
this.date = (day.id.slice(5).replace("-", "/")) + " 19:00";
} else {
this.date = date + "\n" + (day.id.slice(5).replace("-", "/")) + " 19:00";
}
}
}
},
})
</script>
<div class="event-datepicker-wrapper" id="cal" ref="days">
<script src="https://cdn.jsdelivr.net/npm/vue#2.6.12"></script>
<link rel='stylesheet' href='https://unpkg.com/v-calendar/lib/v-calendar.min.css'>
<script src='https://unpkg.com/v-calendar'></script>
<div class="create-date">
<textarea rows="10" name="kouho" v-model="date" class="form-textarea event-choice-textarea" ></textarea>
</div>
<div class="calender-wrapper">
<div class="calender">
<v-calendar :attributes="attributes" #dayclick="onDayClick" />
</div>
</div>
<div class="calender-wrapper">
<div class="calender">
<v-calendar :attributes="attributes" #dayclick="onDayClick" />
</div>
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('calendar', require('./components/Calendar.vue').default);
const app = new Vue({
el: '#app',
});
Calendar.vue
<template>
<div class="event-datepicker-wrapper" ref="days">
<div class="create-date">
<textarea
rows="10"
name="kouho"
v-model="date"
class="form-textarea event-choice-textarea"
></textarea>
</div>
<div class="calender-wrapper">
<div class="calender">
<v-calendar :attributes="attributes" #dayclick="onDayClick" />
</div>
</div>
</div>
</template>
<script>
import VCalendar from "v-calendar";
Vue.use(VCalendar);
export default {
data() {
return {
days: [],
date: "",
};
},
computed: {
dates() {
return this.days.map(day => day.date);
},
attributes() {
return this.dates.map(date => ({
highlight: true,
dates: date,
}));
},
},
methods: {
onDayClick(day) {
console.log(day);
const idx = this.days.findIndex((d) => d.id === day.id);
// console.log(format(day.id));
console.log(idx);
if (idx >= 0) {
this.days.splice(idx, 1);
} else {
const date = this.date;
if (date === "") {
this.date = day.id.slice(5).replace("-", "/") + " 19:00";
} else {
this.date =
date + "\n" + day.id.slice(5).replace("-", "/") + " 19:00";
}
}
},
},
};
</script>
datepick.blade.php in case vue-components
<div id="app">
<div class="event-date-wrapper">
<calendar></calendar>
</div>
</div>
<script src="{{ mix('js/app.js') }}" defer></script>

why the el-input could not input anything in google chrome extension

Now I am writing a Google Chrome Extension that using vue el-input to input the username and password, when input username and password, store the username and password into storage.the code like this:
<template>
<div class="login">
<div class="title">Login</div>
<div class="setting-name">username：</div>
<div class="setting-input">
<el-input #change="saveConfig" placeholder="please input username" ></el-input>
</div>
<div class="setting-name">password：</div>
<div class="setting-input">
<el-input #change="saveConfig" placeholder="please input password"></el-input>
</div>
</div>
</template>
but when I type the username and password in the UI, the el-input did not show what I am inputting. It means could not input anything. what should I do to fix it? The vue version is:
"vue": "2.6.12",
"vue-loader": "15.9.5",
"vue-template-compiler": "2.6.12",
I have tried to forceUpdate like this:
<el-input #change="saveConfig" placeholder="please input username" #input="onInput()"></el-input>
methods: {
onInput(){
this.$forceUpdate();
},
}
still not work. This is my full code:
<template>
<div class="login">
<div class="title">登录</div>
<div class="setting-name">用户名：</div>
<div class="setting-input">
<el-input #change="saveConfig" placeholder="请输入你的用户名" #input="onInput()"></el-input>
</div>
<div class="setting-name">密码：</div>
<div class="setting-input">
<el-input #change="saveConfig" placeholder="请输入你的密码"></el-input>
</div>
</div>
</template>
<script>
export default {
name: 'Login',
data: () => ({
loading: true,
defaultConfig,
config: defaultConfig,
time: '',
leftTime: '',
second: 0,
refreshDisabled: false,
isChrome: navigator.userAgent.indexOf('Chrome') !== -1,
}),
methods: {
onInput(){
this.$forceUpdate();
},
saveConfig() {
saveConfig(this.config, () => {
this.$message({
message: '保存成功',
type: 'success'
});
});
},
toHotkey() {
chrome.tabs.create({
url: 'chrome://extensions/shortcuts'
});
},
refreshRu() {
this.refreshDisabled = true;
refreshRules(() => {
this.second = 0;
this.time = secondToTime(this.second);
this.leftTime = secondToTime(this.config.refreshTimeout - this.second);
this.refreshDisabled = false;
});
},
refreshTime() {
getRulesDate((date) => {
this.second = (+new Date - +date) / 1000;
this.time = secondToTime(this.second);
this.leftTime = secondToTime(this.config.refreshTimeout - this.second);
setTimeout(() => {
this.refreshTime();
}, 1000);
});
}
}
}
</script>

VueJs How to remember input data in the forms even after previous/next page and back to form page?

I am a newible to VueJs
I would like to use Vue2 to create a Vue validation form
Here is the code I have written to perform a Vue validation form
https://jsfiddle.net/vzx07pk3/
index
<div id="app">
<label for="username">Name</label>
<input class="form-control" type="text" name="username" v-bind:class="{ 'is-invalid': usernameError }" v-model="username" placeholder="Username"/>
<div class="invalid-feedback" style="color:red">{{ userErrMsg }}</div>
<br><br>
<label for="">E-Mail</label>
<input class="form-control" type="text" name="email" v-bind:class="{ 'is-invalid': emailError }" v-model="email" placeholder="Email"/>
<div class="invalid-feedback" style="color:red">{{ emailErrMsg }}</div>
<br><br>
</div>
Js file:
var app = new Vue({
el: '#app',
data: {
username: '',
usernameError: false,
userErrMsg: '',
email: '',
emailError: false,
emailErrMsg: ''
},
watch: {
username: function () {
var isText = /^[a-zA-Z0-9]+$/;
if (!isText.test(this.username)) {
this.usernameError = true;
this.userErrMsg = 'Only letters and white space allowed ';
}
else if (this.username.length > 10) {
this.usernameError = true;
this.userErrMsg = 'MaxLength 10';
}
else {
this.usernameError = false;
this.userErrMsg = '';
}
},
email: function () {
var isMail = /^\w+((-\w+)|(\.\w+))*\#[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
if (!isMail.test(this.email)) {
this.emailError = true;
this.emailErrMsg = 'Invalid email format';
}
else {
this.emailError = false;
this.emailErrMsg = '';
}
}
}
});
but When I click the previous or next page, then back to index.html form page
The input field is auto-remove.
How to remember input data in the forms even after the previous/next page?
Should I use localStorage to remember the input value????
such as
mounted:function() {
if (!!window.MSInputMethodContext && !!document.documentMode) {
window.addEventListener('hashchange', this.hashChangeHandler);
}
if (localStorage.username) {
this.username = localStorage.username;
}
if (localStorage.email) {
this.email = localStorage.email;
}
}
Is it the best way to remember input data in the forms even after the previous /next page then back/return to index.html form page????
Thank you very much

You can use keep-alive to remember your input data like this:
<keep-alive>
your Component
</keep-alive>

Why isn't my LWC passing the values on submit to my apex class?

I've created an lwc that is called in a flow, but when I run it the form doesn't submit and the values aren't passing to the apex class. I can't figure out why.
The form allows me to populate the fields when I run it from the opportunity, but when I click complete it doesn't do anything and I'm not seeing any errors in the console.
JS
import {LightningElement, api, track, wire} from 'lwc';
import insertPaymentVaultData from '#salesforce/apex/getAutoCreditCardACHInfo.insertPaymentVaultData';
import { createRecord } from 'lightning/uiRecordApi';
import { OPPORTUNITY } from 'lightning/uiRecordApi';
export default class Autopay extends LightningElement {
#api recordId;
paymentvaultid;
#api
firstName = '';
#api
lastName = '';
address1 = '';
address2 = '';
city = '';
state = 'TX';
zipCode = '';
country = 'United States';
#api
set address(data) {
const adr = typeof data === 'string' ? JSON.parse(data) : data;
this.address1 = adr.address || '';
this.address2 = adr.address2 || '';
this.city = adr.city || '';
this.state = adr.state || '';
this.zipCode = adr.postal_code || '';
this.country = adr.country || '';
}
get address() {
return {
name: `${this.firstName || ''} ${this.lastName || ''}`.trim(),
address1: this.address1,
address2: this.address2,
city: this.city,
state: this.state,
postalCode: this.zipCode,
country: this.country,
};
}
accountNumber = '';
abaNumber = '';
bankName = '';
accountType = 'bchecking'; // bchecking; bsavings; nbchecking; nbsavings; echeck
handleFirstNameChange(event) {
this.firstName = event.target.value;
}
handleLastNameChange(event) {
this.lastName = event.target.value;
}
handleAbaChange(event) {
this.abaNumber = event.target.value;
}
handleBankNameChange(event) {
this.bankName = event.target.value;
}
handleAccountChange(event) {
this.accountNumber = event.target.value;
}
handleAccountTypeChange(event) {
this.accountType = event.target.value;
}
handleAddress1Change(event) {
this.address1 = event.target.value;
}
handleAddress2Change(event) {
this.address2 = event.target.value;
}
handleCityChange(event) {
this.city = event.target.value;
}
handleStateChange(event) {
this.state = event.target.value;
}
handleZipCodeChange(event) {
this.zipCode = event.target.value;
}
handleCountryChange(event) {
this.country = event.target.value;
}
validUSRouting(number) {
if (!number || number.length !== 9) {
return false;
}
let p1 = 0;
let p2 = 0;
let p3 = 0;
for (let i = 0; i < number.length; i += 3) {
p1 += ((+number[i]) * 3);
p2 += ((+number[i + 1]) * 7);
p3 += (+number[i + 2]);
}
const checkSum = p1 + p2 + p3;
return (checkSum !== 0) && ((checkSum % 10) === 0);
}
validateInput() {
// required fields
const fields = ['lastName', 'accountType', 'accountNumber', 'abaNumber', 'bankName', 'address1', 'city', 'state', 'zipCode', 'country'];
const missingFields = fields.filter(f => !this[f]);
if (missingFields.length) {
return `Required fields ${missingFields.join(', ')} are missing`;
}
// aba schema
if (this.country.toLowerCase() === 'united states' && !this.validUSRouting(this.abaNumber)) {
return `Invalid US ABA number`;
}
}
handleFormSubmission() {
if (this._submitted) {
return;
}
const err = this.validateInput();
if (err) {
this.dispatchEvent(new CustomEvent('error', {
detail: {
message: err,
}
}));
return;
}
this.dispatchEvent(new CustomEvent('result', {
detail: {
billingAddress : this.address1,
billingAddress2 : this.address2,
billingCity : this.city,
billingZipCode : this.zipCode,
billingState : this.state,
autoPaymentType : 'ach',
ACHABANumber : this.abaNumber,
ACHAccountNumber : this.accountNumber,
ACHBankName : this.bankName,
BankAccountType : this.accountType,
}
}));
insertpaymentvault({
creditCardNumber : '',
cardType : '',
chaseToken : '',
expirationYear : '',
expirationMonth : '',
fullNameOnCard : '',
billingAddress : this.address1,
billingAddress2 : this.address2,
billingCity : this.city,
billingZipCode : this.zipCode,
billingState : this.state,
autoPaymentType : 'ach',
ACHABANumber : this.abaNumber,
ACHAccountNumber : this.accountNumber,
ACHBankName : this.bankName,
BankAccountType : this.accountType,
});
this._submitted = true;
}
_submitted;
get buttonText() {
return this._submitted ? 'Finished': 'Complete';
}
}
HTML
<template>
<div>
<div class="input-group">
<label>Account Type: </label>
<select onchange={handleAccountTypeChange}>
<option value="bchecking">Checking</option>
<option value="bsaving">Savings</option>
<option value="nbchecking">Business Checking</option>
<option value="nbsavings">Business Savings</option>
<option value="echeck">eCheck</option>
</select>
</div>
<div class="input-group">
<label>Account Number: </label>
<input type="text" value={accountNumber} onchange={handleAccountChange}>
</div>
<div class="input-group">
<label>ABA (Routing) Number: </label>
<input type="text" value={abaNumber} onchange={handleAbaChange}>
</div>
<div class="input-group">
<label>Bank Name: </label>
<input type="text" value={bankName} onchange={handleBankNameChange}>
</div>
<div class="input-group">
<label>First Name: </label>
<input type="text" value={firstName} onchange={handleFirstNameChange}>
</div>
<div class="input-group">
<label>Last Name: </label>
<input type="text" value={lastName} onchange={handleLastNameChange}>
</div>
<div class="input-group">
<label>Street Address: </label>
<input type="text" value={address1} onchange={handleAddress1Change}>
</div>
<div class="input-group">
<label>Address Line 2: </label>
<input type="text" value={address2} onchange={handleAddress2Change}>
</div>
<div class="input-group">
<label>City: </label>
<input type="text" value={city} onchange={handleCityChange}>
</div>
<div class="input-group">
<label>State: </label>
<input type="text" value={state} onchange={handleStateChange}>
</div>
<div class="input-group">
<label>Country: </label>
<input type="text" value={country} onchange={handleCountryChange}>
</div>
<div class="input-group">
<label>Zip Code</label>
<input type="text" value={zipCode} onchange={handleZipCodeChange}>
</div>
<div class="input-group input-group-submit">
<button class="submit-btn" onclick={handleFormSubmission}>{buttonText}</button>
</div>
</div>
</template>
Meta
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>50.0</apiVersion>
<description>Save payment information for cc or ach into the payment vault.</description>
<isExposed>true</isExposed>
<masterLabel>autopay</masterLabel>
<targets>
<target>lightning__FlowScreen</target>
<target>lightning__RecordPage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>Opportunity</object>
</objects>
</targetConfig>
<targetConfig targets="lightning__FlowScreen">
<property name="recordId" type="String" label="Opportunity Id"/>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Apex Class
global with sharing class getAutoCreditCardACHInfo {
#AuraEnabled(cacheable=true)
public static Object getCreditCardFromChaseTokenObject(String AccountId){
Account Acct = [
Select Id,Payment_Vault_Id__c
FROM Account
Where Id = :AccountId
];
List<PaymentVault__c> paymentvault = new List<PaymentVault__c>();
paymentvault = [
SELECT
id,
Credit_Card_Number__c,
Card_Type__c,
CC_Expiration_Year__c,
CC_Expiration_Month__c,
FullNameOnCard__c,
BillingAddress__c,
BillingAddress2__c,
BillingCity__c,
BillingZipcode__c,
BillingState__c,
ACH_ABANumber__c,
ACH_AccountNumber__c,
ACH_BankName__c,
AutoPaymentType__c
FROM PaymentVault__c
WHERE id = :Acct.Payment_Vault_Id__c
];
if(!paymentvault.isEmpty()){
return paymentvault;
}
else{
return null;
}
}
#AuraEnabled
public static string insertPaymentVaultData(
String creditCardNumber,
String cardType,
String chaseToken,
String expirationYear,
String expirationMonth,
String fullNameOnCard,
String billingAddress,
String billingAddress2,
String billingCity,
String billingZipCode,
String billingState,
String autoPaymentType,
String ACHABANumber,
String ACHAccountNumber,
String ACHBankName,
String BankAccountType
){
PaymentVault__c paymentvault = new PaymentVault__c();
paymentvault.Credit_Card_Number__c = creditCardNumber;
paymentvault.Card_Type__c = cardType ;
paymentvault.CC_Expiration_Year__c = expirationYear;
paymentvault.CC_Expiration_Month__c = expirationMonth;
paymentvault.FullNameOnCard__c = fullNameOnCard;
paymentvault.BillingAddress__c = billingAddress;
paymentvault.BillingAddress2__c = billingAddress2;
paymentvault.BillingCity__c = billingCity;
paymentvault.BillingZipcode__c = billingZipCode;
paymentvault.BillingState__c = billingState;
paymentvault.AutoPaymentType__c = autoPaymentType;
paymentvault.ACH_ABANumber__c = ACHABANumber;
paymentvault.ACH_AccountNumber__c = ACHAccountNumber;
paymentvault.ACH_BankName__c = ACHBankName;
paymentvault.Bank_Account_Type__c = BankAccountType;
Insert paymentvault;
system.debug('paymentvault.Id: ' + paymentvault.Id);
return paymentvault.Id;
}
}

Your imported apex method is named insertPaymentVaultData. You are calling insertpaymentvault which does not seem to be defined anywhere.

If Else in react component always run else condition

I am trying to build a contact form where an if else statement checks the validity of the email address entered, then with a nested if else checks whether the honeypot filed has a value and sends an ajaxj post request to an aws api gateway.
The ajax post runs without problem, but the outer else is always run.
Here the code:
import React from 'react'
import './style.scss'
const $ = require('jquery')
class ContactForm extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '',
email:'',
subject:'',
message:'',
honeypot:'',
result:'',
alertType:'',
formErrors:{
email:'',
name:'',
message:''
},
isFormValid:false,
emailValid:false,
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const target = event.target
const value = target.value
const name = target.name
this.setState({ [name]: value })
}
handleSubmit(event) {
event.preventDefault();
var URL = "https://someaddress/";
var form =this
var data = {
name: this.cleanInput(this.state.name.trim()),
email: this.cleanInput(this.state.email.trim()),
subject: this.cleanInput(this.state.subject.trim()),
message: this.cleanInput(this.state.message.trim()),
}
this.validateField('email',data.email)
data.message = "Bilgiler şunlar:\nAdı:"+data.name+"\nEmail Adresi: "+data.email+"\nKonu:"+data.subject+"\nMesaj:"+data.message
data.subject = "[Bestpet Web Sitesinden Doldurulan Form] "+data.subject;
data.email = "info#atlaspet.com.tr";
if(this.state.emailValid ===true){
if (this.state.honeypot=== ''){
$.ajax({
type: "POST",
url: URL,
dataType: "json",
contentType: "application/json",
data: JSON.stringify(data),
success: function(){
form.setState({name:'',email:'',message:'',subject:'',result:'Form başarıyla gönderildi.',alertType:'alert alert-success'})
},
error: function () {
// show an error message
form.setState({result: 'Sorunlar oluştu. Formu gönderemedik.',alertType:'alert alert-danger'});
},
});
} else {console.log("Hi there, I guess you are not human baby");}
} else { form.setState({result: 'Lütfen girmiş olduğunuz email adresini kontrol ediniz.',alertType:'alert alert-danger'})}
}
validateField(fieldName, value) {
let fieldValidationErrors = this.state.formErrors;
let emailValid = this.state.emailValid;
;
switch (fieldName) {
case 'email':
emailValid = value.match(/^([\w.%+-]+)#([\w-]+\.)+([\w]{2,})$/i);
fieldValidationErrors.email = emailValid ? true : false;
break;
default:
break;
}
this.setState({
formErrors: fieldValidationErrors,
emailValid: fieldValidationErrors.email
}, this.validateForm);
console.log(this)
}
validateForm() {
this.setState({ isFormValid: this.state.emailValid });
}
cleanInput(input){
var search = [
'<script[^>]*?>.*?</script>', // Strip out javascript
'<[/!]*?[^<>]*?>', // Strip out HTML tags
'<style[^>]*?>.*?</style>', // Strip style tags properly
'<![sS]*?--[ \t\n\r]*>', // Strip multi-line comments
]
var text = input
// console.log(search.length)
//var output = preg_replace($search, '', input);
for (let i = 0; i < search.length; i++) {
text = text.replace(new RegExp(search[i], 'gi'), '')
}
return text
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<div>
<div className={"col-md-12 "+this.state.alertType}>{this.state.result!=='' && this.state.result}</div>
<input name="honeypot" type="text" style={{display:"none"}} value={this.state.honeypot} onChange={this.handleChange}/>
</div>
<div className="form-group">
<div className="col-md-6">
<label>
Name:
{this.state.formErrors.name!=='' && <div className="col-md-12 alert alert-danger">'Sizinle iletişim kurabilmemiz için bir isim girmelisiniz'</div>}
<input name="name" type="text" value={this.state.name} className ="form-control required" onChange={this.handleChange} />
</label>
</div>
<div className="col-md-6">
<label>
email
<input type="text" name="email" className="form-control required" value={this.state.email} onChange={this.handleChange}/>
</label>
</div>
</div>
<div className="form-group">
<div className="col-md-12">
<label>
Subject
<input type="text" name="subject" className="form-control required" value={this.state.subject} onChange={this.handleChange}/>
</label>
</div>
</div>
<div className="form-group">
<div className="col-md-12">
<label>
Message
<textarea name="message" rows="6" className="form-control required" value={this.state.message} onChange={this.handleChange}/>
</label>
</div>
</div>
<div className="form-group">
<div className="col-md-12">
<input type="submit" value="Submit" className="btn btn-sm btn-block btn-primary"/>
</div>
</div>
</form>
);
}
}
export default ContactForm
The section of code I have problems with is in handleSubmit function.
Thanks for help in advance and a happy new year to all.

I have moved the validity check to handleChange function and it is now working as intended.
Thanks a lot!