I prepopulated my edit form inputs based on API response
When I clicked on Continue, validate() will trigger.
validate() {
this.$refs.form.validate()
console.log('this.$refs.form.validate() == ', this.$refs.form.validate())
I have no idea why it kept returning false
As you can see, Name, Description, Timezone, Start Date, Start Time, End Date, End Time all are there provided. The form should be valid.
Codes
<template>
<v-container fluid >
<Navbar />
<Breadcrumbs />
<v-row>
<v-col cols="12">
<v-card elevation="2">
<PanelHeader type="update" icon="campaign" title="Campaigns" />
<v-stepper v-model="e1" justify="center" elevation="0">
<v-stepper-header>
<v-stepper-step :complete="e1 > 1" step="1"> Campaign </v-stepper-step>
<v-divider></v-divider>
<v-stepper-step :complete="e1 > 2" step="2"> Setup </v-stepper-step>
<v-divider></v-divider>
<v-stepper-step step="3"> Finish </v-stepper-step>
</v-stepper-header>
<v-stepper-items>
<v-stepper-content step="1">
<v-card elevation="0">
<v-form ref="form" lazy-validation v-model="valid" id="form">
<v-row>
<v-card-text >
Campaigns
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</template>
<span>Select marketing campaign type for Print Materials or Product Tags. Provide a name to identify the marketing campaign.</span>
</v-tooltip>
</v-card-text>
</v-row>
<v-row>
<v-col >
<v-select disabled dense outlined :items="types" label="Type" v-model="form.values.type" :rules="form.rules.type"></v-select>
</v-col>
<v-col cols="12" sm="6" md="2">
<v-text-field dense outlined v-model="form.values.name" :rules="form.rules.name" label="Name" required></v-text-field>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-textarea dense rows="1" outlined v-model="form.values.description" label="Description" required></v-textarea>
</v-col>
</v-row>
<v-row>
<v-card-text
>Schedule :
<v-tooltip right>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon color="grey lighten-1">info</v-icon>
</v-btn>
</template>
<span>Set the time zone, start and end date for this campaign to be active.</span>
</v-tooltip>
</v-card-text>
<v-col cols="12" sm="6" md="4">
<v-select dense outlined :items="timezones" v-model="form.values.timezone" :rules="form.rules.timezone" label="Timezone" append-icon="lock_clock"></v-select>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="2">
<v-menu v-model="form.values.startDateMenu" :close-on-content-click="false" :nudge-right="40" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense outlined v-model="form.values.startDate" :rules="form.rules.startDate" label="Start Date" append-icon="mdi-calendar" readonly v-bind="attrs" v-on="on"></v-text-field>
</template>
<v-date-picker v-model="form.values.startDate"></v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" md="2">
<v-menu ref="menu" v-model="startTimeMenu" :close-on-content-click="false" :nudge-right="40" :return-value.sync="form.values.startTime" transition="scale-transition" offset-y max-width="290px" min-width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense v-model="form.values.startTime" label="Start Time" append-icon="mdi-clock-time-four-outline" readonly v-bind="attrs" v-on="on" outlined></v-text-field>
</template>
<v-time-picker v-if="startTimeMenu" v-model="form.values.startTime" full-width @click:minute="$refs.menu.save(form.values.startTime)"></v-time-picker>
</v-menu>
</v-col>
</v-row>
<v-row>
<v-col cols="12" sm="6" md="2">
<v-menu v-model="endDateMenu" :close-on-content-click="false" :nudge-right="40" transition="scale-transition" offset-y min-width="auto">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense outlined v-model="form.values.endDate" :rules="form.rules.endDate" :min="form.values.startDate" label="End Date" append-icon="mdi-calendar" readonly v-bind="attrs" v-on="on"></v-text-field>
</template>
<v-date-picker v-model="form.values.endDate"></v-date-picker>
</v-menu>
</v-col>
<v-col cols="12" sm="6" md="2">
<v-menu ref="menu" v-model="endTimeMenu" :close-on-content-click="false" :nudge-right="40" :return-value.sync="form.values.endTime" transition="scale-transition" offset-y max-width="290px" min-width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field dense v-model="form.values.endTime" label="End Time" append-icon="mdi-clock-time-four-outline" readonly v-bind="attrs" v-on="on" outlined></v-text-field>
</template>
<v-time-picker v-if="endTimeMenu" v-model="form.values.endTime" :min="form.values.startTime" full-width @click:minute="$refs.menu.save(form.values.endTime)"></v-time-picker>
</v-menu>
</v-col>
</v-row>
</v-form>
</v-card>
<v-btn color="primary" @click="validate()" :disabled="!valid"> Continue </v-btn>
<router-link :to="`/${segment1}`">
<v-btn text> Cancel </v-btn>
</router-link>
</v-stepper-content>
<v-stepper-content step="3"> </v-stepper-content>
</v-stepper-items>
</v-stepper>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
import Navbar from '../../../components/Navbar'
import Breadcrumbs from '../../../components/Breadcrumbs'
import PanelHeader from '../../../components/PanelHeader'
import axios from 'axios'
import moment from 'moment-timezone'
export default {
components: {
Navbar,
Breadcrumbs,
PanelHeader
},
beforeMount() {},
computed: {
segment1: function () {
const firstSegment = new URL(window.location.href).pathname.split('/')[1]
return `${firstSegment}`
},
timeZone: function () {
console.log('timeZone')
}
},
beforeMount() {
this.getCampaign()
},
data() {
return {
campaign: {},
form: {
errors: {},
values: {
name: '',
type: '',
description: '',
timezone: '',
startDate: '',
endDate: '',
startTime: moment().format('HH:mm'),
endTime: '24:00',
urlType: 'Single',
url: 'https://',
attribute: '',
operator: '',
value: ''
},
rules: {
type: [(v) => !!v || 'Type is required'],
name: [(v) => !!v || 'Name is required'],
startDate: [(v) => !!v || 'Start Date is required'],
endDate: [(v) => !!v || 'End Date is required'],
timezone: [(v) => !!v || 'Timezone is required'],
startTime: [(v) => !!v || 'Start Time is required'],
endTime: [(v) => !!v || 'End Time is required'],
urlType: [(v) => !!v || 'URL Type is required'],
url: [(v) => !!v || 'URL is required'],
attribute: [(v) => !!v || 'Attribute is required'],
operator: [(v) => !!v || 'Operator is required'],
value: [(v) => !!v || 'Value is required']
}
},
e1: 1,
valid: false,
valid2: false,
types: ['Product', 'Marketing'],
operator: [],
operators: ['=', '!=', 'in', 'not in'],
value: [],
values: ['Italy', 'Finland', 'Norway'],
timezones: moment.tz.names(),
startDateMenu: false,
endDateMenu: false,
startTimeMenu: false,
endTimeMenu: false,
urlTypes: ['Single', 'Multiple'],
attributes: []
}
},
watch: {
'form.values.attribute'() {
this.operator = null
axios.defaults.headers['Content-Type'] = 'application/json'
let data = {
$root: 'vc_operator',
op: 'read',
brand: 'COLM',
selection: {
filters: [`id:${this.form.values.attribute}`]
},
_SESSION: localStorage.getItem('session')
}
axios.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, data).then((response) => {
this.operators = response.data.operators
})
}
},
methods: {
getAllData(id) {
let myForm = document.getElementById(id)
console.log(
Array.from(myForm.elements).map((e) => {
return e.value
})
)
},
getCampaign() {
let filters = 'id:' this.$route.params.id
let body = {
$root: 'vc_campaign',
op: 'read',
brand: 'COLM',
selection: {
filters: [filters]
},
_SESSION: localStorage.getItem('session')
}
axios.defaults.headers['Content-Type'] = 'applcation/json'
axios
.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body)
.then((response) => {
if (response.data.status == 0) {
this.campaign = response.data.campaigns[0]
this.form.values.name = this.campaign.name
this.form.values.description = this.campaign.description
this.form.values.timezone = this.campaign.time_zone
// console.log(this.campaign.start_date.split('T')[0])
// this.form.values.startDate = this.campaign.start_date.split("T");
this.form.values.startDate = this.campaign.start_date.split('T')[0]
this.form.values.endDate = this.campaign.end_date.split('T')[0]
this.form.values.startTime = this.campaign.start_date.split('T')[1]
this.form.values.endTime = this.campaign.end_date.split('T')[1]
} else {
alert(response.data.statustext)
reject(response.data.statustext)
}
})
.catch((err) => {
console.log('Something went wrong: ', err)
})
},
validate() {
this.$refs.form.validate()
console.log('this.$refs.form.validate() == ', this.$refs.form.validate())
if (this.$refs.form.validate()) {
if (this.campaign.type_id == 2) {
let attributes = {
$root: 'vc_rule_attribute',
op: 'read',
brand: 'COLM',
_SESSION: localStorage.getItem('session')
}
axios.defaults.headers['Content-Type'] = 'applcation/json'
axios.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, attributes).then((response) => {
this.attributes = response.data.rule_attributes
})
}
let data = {
name: this.form.values.name,
description: this.form.values.description,
start_date: this.startDateAndStartTime,
end_date: this.endDateAndEndTime,
time_zone: this.form.values.timezone,
priority: '100',
status_id: 1,
type_id: 1
}
console.log('data', data)
let body = {
$root: 'vc_campaign',
op: 'update',
brand: 'COLM',
campaigns: [data],
_SESSION: localStorage.getItem('session')
}
axios.defaults.headers['Content-Type'] = 'application/json'
axios.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body).then((response) => {
// console.log(response.data.campaigns[0])
this.tmpCampaign = response.data.campaigns[0]
// console.info('here2', this.tmpCampaign)
let data = {
quantity: 1,
campaign_id: this.tmpCampaign.id,
name: this.form.values.name,
url: this.form.values.url
}
console.info('data =', data)
let body = {
$root: 'vc_standalone',
op: 'update',
brand: 'COLM',
label_headers: [data],
_SESSION: localStorage.getItem('session')
}
axios
.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body)
.then((response) => {
console.log(response.data.label_headers[0])
this.labelHeader = response.data.label_headers[0]
if (this.labelHeader.quantity == 1) {
//get-serial
let body = {
$root: 'get-serial',
_SESSION: localStorage.getItem('session'),
eid: 'COLM',
mdid: this.labelHeader.id,
symbology: 'QR',
version: '2Q',
encode: 'ascii',
format: 'PNG',
scale: 15.0,
bg: 'FFFFFFFF',
fg: '000000FF'
}
axios
.post(`${process.env.VUE_APP_API_ENDPOINT_URL}`, body, { responseType: 'arraybuffer' })
.then((response) => {
console.log('get-serial', response.data)
const base64 = btoa(new Uint8Array(response.data).reduce((data, byte) => data String.fromCharCode(byte), ''))
this.qrCode = 'data:image/jpg;base64,' base64
})
.catch((err) => {
console.log('Something went wrong: ', err)
})
}
})
.catch((err) => {
console.log('Something went wrong: ', err)
})
this.e1 = 2
// console.info('here', this.tmpCampaign)
})
} else {
console.error('error:', this.form.values)
}
}
}
}
</script>
<style></style>
How can I debug this further ?
CodePudding user response：
In your Screenshot page, the type is not set. but the rules said type is required. Even if it's disabled it still need to fulfill the rules you set