I am trying to change the users input to lowercase. I know this looks wrong but when I try and type this.email or this.name for the watch it obviously does not work. the v-model is this.email/name accordingly.
What do I need to correct on this
data() {
return {
form: this.$inertia.form({
name: '',
email: '',
password: '',
password_confirmation: '',
birthdate: '',
user_latitude: '',
user_longitude: '',
user_city: '',
user_region: '',
user_country: '',
terms: false,
}),
address: "",
user_address: [],
}
},
watch: {
email(newVal) {
this.form.email = this.form.email.toLowerCase()
},
name(newVal) {
this.form.name = this.form.name.toLowerCase()
}
},
You could try to watch the property path :
watch: {
'form.email'(newVal) {
this.form.email = this.form.email.toLowerCase()
},
or a filter .
Related
This question already has an answer here:
VueJS | Method "watch" has type "object" in the component definition
(1 answer)
Closed 1 year ago.
I'm building a Dropdown Component, and Vue is throwing me the following error:
Method "watch" has type "object" in the component definition. Did you reference the function correctly?
watch: {
selected: function (val) {
console.log("value changed", val);
},
}
I've done some research but I can't figure out how to correctly resolve this error, as it appears correct to me, let me know if I should attach some more relevant code. I'll attach my full methods below:
methods: {
updateSelectedValue: function (newValue) {
this.selected = newValue;
},
addParam() {
this.addFormFields(['params'], {
slug: '',
name: '',
isRequired: true,
description: '',
typeSlug: '',
});
},
deleteParam(idx){
this.removeFormFields(['params', idx]);
},
restoreParam(idx){
this.restoreFormFields(['params', idx])
},
$newObject() {
return {
slug: '',
name: '',
isAbstract: false,
requester: '',
description: '',
status: 'inactive',
params: [],
selected: '',
};
},
$extraPrams() {
return {
parentId: this.parentId,
};
},
watch: {
selected: function (val) {
console.log("value changed", val);
},
}
},
};
it seems that you put watch in methods. it should be out of methods
I have a Request Form Component, and within this request form Component I have a Dropdown Menu Component, which I will link both below. All values in my table are pushed into an object upon hitting the Submit Button. However my dropdown selection is only being picked up by my console.log and not being pushed into the Object.
I'm not so familiar with Vue, so I'm not sure what direction to go in for fixing this. I'll attach the relevant (?) pieces of code below.
Parent Component:
<SelectComponent :selected="this.selected" #change="updateSelectedValue" />
export default {
fullScreen: true,
name: 'CcRequestForm',
mixins: [BaseForm],
name: "App",
components: {
SelectComponent,
},
data() {
return {
selected: "A",
};
},
props: {
modelName: {
default: 'CcRequest',
},
parentId: {
type: Number,
default: null,
},
},
mounted() {
this.formFields.requester.value = this.currentRequesterSlug;
},
destroyed() {
if (!this.modelId) return;
let request = this.currentCcRequest;
request.params = request.params.filter(p => p.id)
},
computed: {
...mapGetters(['ccTypesForRequests', 'currentRequesterSlug', 'currentCcRequest']),
ccTypesCollection() {
return this.ccTypesForRequests.map((x)=>[x.slug, this.t(`cc_types.${x.slug}`)]);
}
},
methods: {
addParam() {
this.addFormFields(['params'], {
slug: '',
name: '',
isRequired: true,
description: '',
typeSlug: '',
selected: ''
});
},
deleteParam(idx){
this.removeFormFields(['params', idx]);
},
restoreParam(idx){
this.restoreFormFields(['params', idx])
},
$newObject() {
return {
slug: '',
name: '',
isAbstract: false,
requester: '',
description: '',
status: 'inactive',
params: [],
selected: ''
};
},
$extraPrams() {
return {
parentId: this.parentId,
};
},
updateSelectedValue: function (newValue) {
this.selected = newValue;
},
},
watch: {
selected: function (val) {
console.log("value changed", val);
},
},
};
Child Component:
<script>
export default {
name: "SelectComponent",
props: {
selected: String,
},
computed: {
mutableItem: {
get: function () {
return this.selected;
},
set: function (newValue) {
this.$emit("change", newValue);
},
},
},
};
You have to define the emit property in the parent component, or else it won't know what to expect. That would look like:
<SelectComponent :selected="this.selected" #update-selected-value="updateSelectedValue" />
Check out this tutorial for more information: https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation
To update selected property inside the object, in this constellation, you need to update object property manually upon receiving an event, inside of updateSelectedValue method. Other way could be creating a computed property, since it's reactive, wrapping "selected" property.
computed: {
selectedValue () {
return this.selected
}
}
And inside of object, use selectedValue instead of selected:
return {
...
selected: selectedValue
}
I'm new to VueJS.
My component's template and the props are below
<template>
<div>
<label>WorkHours</label>
<div v-for="(data, day) in value.config.workingHours">
<label>{{day}}</label>
<hour-range-selector
:value="[data.timeFrom, data.timeTo]"
class="rangeText"
:mandatory="true"
:placeholder="placeholder"
:full-range="['00:00', '23:59']"
#input="(val) => workingHoursChanged(val, day)"
/>
</div>
</div>
</template>
<script>
import HourRangeSelector from '..../HoursRangeSelector';
export default {
name: 'WorkingDaysSelector',
components: {HourRangeSelector},
props: {
value: {
config:{
workingHours: {
monday: {
available: false,
timeFrom: '',
timeTo: '',
},
tuesday: {
available: false,
timeFrom: '',
timeTo: '',
},
wednesday: {
available: false,
timeFrom: '',
timeTo: '',
},
thursday: {
available: false,
timeFrom: '',
timeTo: '',
},
friday: {
available: false,
timeFrom: '',
timeTo: '',
},
saturday: {
available: false,
timeFrom: '',
timeTo: '',
},
sunday: {
available: false,
timeFrom: '',
timeTo: '',
}
}
}
},
placeholder: {
type: Array,
default: () => (['From', 'To']),
},
},
data() {
return {
fullRange: ['00:00', '23:59'],
};
},
methods:{
workingHoursChanged(val, day){
//IN PROGRESS
}
};
</script>
<style scoped>
</style>
If I run the code, I'm getting
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'workingHours' of undefined"
Am I approaching correctly? Or How do I achieve this?
Props are the data passed from the parent component to the child one, if you want to define local properties you should define them inside the data option like :
export default {
name: 'WorkingDaysSelector',
components: {HourRangeSelector},
props: {
placeholder: {
type: Array,
default: () => (['From', 'To']),
},
},
data() {
return {
value: {
config:{
workingHours: {
monday: {
available: false,
timeFrom: '',
timeTo: '',
},
tuesday: {
available: false,
timeFrom: '',
timeTo: '',
},
wednesday: {
available: false,
timeFrom: '',
timeTo: '',
},
thursday: {
available: false,
timeFrom: '',
timeTo: '',
},
friday: {
available: false,
timeFrom: '',
timeTo: '',
},
saturday: {
available: false,
timeFrom: '',
timeTo: '',
},
sunday: {
available: false,
timeFrom: '',
timeTo: '',
}
}
}
},
fullRange: ['00:00', '23:59'],
};
},
methods:{
workingHoursChanged(val, day){
//IN PROGRESS
}
};
</script>
<style scoped>
</style>
I am validating a vue form with Vuelidate and I am getting the following error when trying to edit it:
Error: [vuex] do not mutate vuex store state outside mutation handlers.
This is my form input structure:
<hp-text-input
id="company-name"
v-model.trim="$v.formData.companyName.$model"
:code="$v.formData.companyName.$model"
:v="$v.formData.companyName"
:disabled="formData.loading"
:labeltext="$t('components.add_address_modal.company')"
name="company-name"
></hp-text-input>
This is my state:
data() {
return {
formData: {
country: 'Ireland',
address: '',
addressAdditional: '',
addressType: '',
city: '',
companyName: '',
firstName: '',
lastName: '',
zipCode: '',
},
}
},
These are my Vuelidate validations:
validations() {
return {
formData: {
country: {},
address: { required, max: maxLength(32) },
addressAdditional: { max: maxLength(32) },
addressType: { required },
city: { required },
companyName: {},
firstName: { required },
lastName: { required },
zipCode: { required, max: maxLength(10), zipValidate },
},
}
},
I do use a vuex store in this component but it is not even related to the form data itself.
The only thing that worked to get rid of the error for now was creating a copy of the formData and passing it to the form, which for me doesn't make any sense to do.
Do you have any suggestions?
I defined an object in data as
export default {
data() {
return {
labelPosition: 'right',
isText: false,
isDate: false,
isExam: false,
isFile: false,
isWrite: false,
stepLists: [],
flowId: '',
txtName: '',
form: {
textName: '',
textPosition: '',
}
the html like this :
when I change the form.textName ,I found it doesn't work
this.$set(this.form, 'textName', temp.name) //not work
this.form={textName:'abc'}
this.form = Object.assign({}, this.form)
//not work
this.$set(this.form,'textName', '---------------------') work well.