We Keep Coding

Have variable changes on button click but initially set using localStorage in vue

I am trying to setup a button that changes a data value in Vue but also have it set using localStorage initally. This way I can have it keep the previous state it was in before a page refresh. Below is the code I'm using and I'm able to get it to work but know that it would be preferable to use the computed section but haven't been able to get that to work properly.
Would anyone know what is going wrong?
My button is triggered using the testing method and the variable in question is isGrid.
export default {
data() {
return {
option: 'default',
}
},
components: {
FileUploader,
},
mixins: [
visibilitiesMixin,
settingsMixin
],
props: {
vehicleId: {
type: Number,
required: true,
default: null,
}
},
computed: {
...mapState([
'isLoading',
'images',
'fallbackImageChecks',
'selectedImages'
]),
isGrid: {
get() {
return localStorage.getItem('isGrid');
},
},
imagesVModel: {
get() {
return this.images;
},
set(images) {
this.setImages(images);
}
},
selectedImagesVModel: {
get() {
return this.selectedImages;
},
set(images) {
this.setSelectedImages(images);
}
},
removeBgEnabled() {
return this.setting('nexus_integration_removebg_enabled') === 'enabled';
},
},
mounted() {
this.loadImages(this.vehicleId);
},
methods: {
testing() {
if (this.isGrid === 'false' || this.isGrid === false) {
localStorage.setItem('isGrid', true);
this.isGrid = true;
console.log(this.isGrid);
console.log(localStorage.getItem('isGrid'));
} else {
localStorage.setItem('isGrid', false);
this.isGrid = false;
console.log('b');
console.log(this.isGrid);
console.log(localStorage.getItem('isGrid'));
}
},
}

I suggest you use vuex with vuex-persistedstate.
https://www.npmjs.com/package/vuex-persistedstate

How can use computed for v-model?

I got data from API using computed. "UserModule.userInfo.usrEmail" is the state in my vuex. Like below:
data() {
return {
vModel: {
email: {
value: "",
},
}
}
}
computed: {
email:{
get: function(){
return UserModule.userInfo ? UserModule.userInfo.usrEmail : "";
},
set : function(email){
this.vModel.email.value = email
}
},
}
And then show it to user like below:
<input v-model="email"></input>
User can edit email and also cancel their edit process and return to their previous data but in edit everything was correct but when i want to cancel this process my previous data did not show in the input and i saw my new data which is not correct i want to cancel it. This is my cancel method on input:
resetInput(input) {
this.vModel.email.value = this.email
},
"this.email" refer to my computed which is get data from API.
How can i write this cancel process correctly and see my previous data in input tag?

so you can use this solution:
data() {
return {
useGet :{
email: true,
},
}
}
in your method:
resetInput(input) {
this.useGet.email = true
},
and in your computed:
email: {
get: function () {
if (this.useGet.email) {
return UserModule.userInfo ? UserModule.userInfo.usrEmail : ""
}
return ""
},
set: function (email) {
this.useGet.email = false
}
},

this is because of your UserModule.userInfo.usrEmail.
this state does not update.
your get in computed will be work when your UserModule.userInfo.usrEmail changes.

Validations in Vue using Vuelidate are not working

Hey guys
I wonder if I miss something here, iv'e trying to figure it out for a few hours and didn't came up with a solution.
I'm trying to use form validations using Vuelidate in vue, everything seems in place but after the custom alert I created, the form is still proceeding to the next stage.
I declared Vuelidate like this:
import useVuelidate from '#vuelidate/core'
import { required } from '#vuelidate/validators'
Inside Data() I did as follows:
data: () => ({
v$: useVuelidate(),
currentStage: 1,
traffic: {
unique: '',
unique1: '',
unique2: '',
unique3: '',
unique4: ''
},
}),
Declared validations outside of data(), like this:
validations() {
return {
traffic: {
unique1: { required },
unique2: { required },
unique3: { required },
unique4: { required },
unique5: { required }
},
}
},
Last thing is the computed, which I have function that is creating the input fields in stage 3 of the form:
computed: {
appendFields() {
this.v$.$validate()
if(!this.v$.$error){
if(this.jsonStatham.hasOwnProperty(this.traffic.unique1)){
this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
}
} else {
alert("Error, Not all fields are filled in.")
}
}
},
So here is the problem, when appendFields() called, I do get this alert: alert("Error, Not all fields are filled in.")
But After I press "ok" in the alert, the form is still proceeding to the next stage.
What am I missing?
Edit:
This is the button who execute the "appendFields" method:
<button #click="buttonClicked(0); appendFields;">Next Stage</button>
And this is buttonClicked function:
buttonClicked(value) {
if(value === 0){
this.currentStage++;
return this.currentStage;
}
if(value === 1){
this.currentStage--;
return this.currentStage;
}
},

The click-handler updates currentStage without first validating the form. However, the validation occurs in appendFields, which is computed after buttonClicked(). The validation should be the first step, which can block the proceeding steps.
I would refactor it like this:
Make appendFields a component method, since it's not really a computed property (especially because it returns nothing).
Move the currentStage update into its own function for clarity.
Move the form validation from appendFields() to the button's click-handler.
In the click-handler, call the functions created in step 1 and 2 if the form is valid.
export default {
methods: {
// 1️⃣
appendFields() {
if (this.jsonStatham.hasOwnProperty(this.traffic.unique1)) {
this.integrationParams.push(...Object.keys(this.jsonStatham[this.traffic.unique1]))
}
},
// 2️⃣
updateStage(value) {
if (value === 0) {
this.currentStage++
} else if (value === 1) {
this.currentStage--
}
},
buttonClicked(value) {
// 3️⃣
this.v$.$validate()
if (!this.v$.$error) {
// 4️⃣
this.appendFields()
this.updateStage(value)
} else {
alert("Error, Not all fields are filled in.")
}
}
}
}
Also be aware that useValidate() is intended for the Composition API, so it should be called inside setup():
export default {
setup() {
return {
v$: useValidate()
}
}
}

How can I refactor repetitive conditional Vue.js code?

I have this code in my Vue.js component:
mounted() {
if (localStorage.dobDate) {
this.form.dobDate = localStorage.dobDate;
}
if (localStorage.dobMonth) {
this.form.dobMonth = localStorage.dobMonth;
}
if (localStorage.dobYear) {
this.form.dobYear = localStorage.dobYear;
}
},
watch: {
"form.dobDate": {
handler: function(after, before) {
localStorage.dobDate = after;
},
deep: true
},
"form.dobMonth": {
handler: function(after, before) {
localStorage.dobMonth = after;
},
deep: true
},
"form.dobYear": {
handler: function(after, before) {
localStorage.dobYear = after;
},
deep: true
}
Ask you can see it can get very repetitive, if for example I had a large form, and I don't want to do this for every field. Is there a way I can approach this to make it more DRY? Is there a way I can make it more dynamic for any field in a form for example?

In the mounted hook create an array of localStorage fields ["dobDate","dobMonth","dobYear"] and loop through it using forEach method, for each field localStorage[fieldName] check if it's defined using conditional operator, if it's defined assign it to the correspondant field name in the form data property else pass to the next element:
mounted(){
["dobDate","dobMonth","dobYear"].forEach(field=>{
localStorage[field]?this.form[field]=localStorage[field]:{};
})
}
In the watch property watch the form object deeply (watch its nested fields) then loop through its keys by doing the reciprocal operation made in mounted hook :
watch: {
form: {
handler: function(after, before) {
Object.keys(after).forEach(key=>{
localStorage[key]=after[key]
})
},
deep: true
}
}

Here is another approach with multiple (no deep) watchers.
data: {
form: {},
dateFields: ['dobDate', 'dobMonth', 'dobYear']
},
mounted() {
for (const dateField of this.dateFields) {
if (localStorage[dateField])
this.$set(this.form, dateField, localStorage[dateField])
}
},
created() {
for (const dateField of this.dateFields) {
this.$watch('form.' + dateField, function(after, before) {
localStorage[dateField] = after;
});
}
}
I ignore if it's more or less efficient than only one deep watcher. It may depends on the way your data change.

I'm sure you must have reasons for using localStorage for saving form data in localStorage, so with this code, you can pass the whole form object to localStorage and can retrieve that. in this case, any change in form would make this watch run
mounted() {
if (localStorage.form) {
this.form = localStorage.form
}
},
watch: {
"form": {
handler: function(after, before) {
localStorage.form = after;
},
deep: true
}
}

How to detect changes made in the edited field in Vue?

I have an object like this:
users: {
email: '',
password: ''
}
When user edits something, I want to detect the changes made in the key of the users object & save that key in another object(say editedFields)! How can I do this?
I tried using deep watchers like this:
watch: {
users: {
handler: function(val, oldVal) {
//
},
deep: true
}
}
But I am not sure how to get that edited key! Please help

I think this works:
watch: {
'users.email': function(newEmail, oldEmail) {
//
}
}

I think something like this might work?
data: function() {
return {
user: {
email: '',
password: ''
},
editedFields: []
}
},
watch: {
users: {
handler: function(val, oldVal) {
for (var key in val) {
if(val[key] != oldVal[key]) {
this.data.editedFields.push(key);
}
}
},
deep: true
}
}
But actually, there better way of handling this would be to create a new Vue component for each field. You can then test to see if its been updated in each component.