I've got simple form.
Every time I try to fill a form, the rest of the fields clears.
In addition validation errors are displayed below each field instead of just one. How to fix this?
This how it looks before any action: https://i.imgur.com/zjGsNRL.png
And this how it looks after wrong data: https://i.imgur.com/pSh6rFM.png
My constructor:
constructor(props) {
super(props);
this.state = {
title: {
text: ''
},
foods: [{
text: '',
kcal: '',
protein: '',
carbohydrate: '',
fat: ''
}],
};
Handlers and validation f():
handleKcalChange(event, index) {
const foods = this.state.foods.slice();
const value = event.target.value;
foods[index] = {
kcal: value,
...this.validateParam(value)
}
this.setState({
foods: foods
});
}
handleProteinChange(event, index) {
const foods = this.state.foods.slice();
const value = event.target.value;
foods[index] = {
protein: value,
...this.validateParam(value)
}
this.setState({
foods: foods
});
}
validateParam = (paramNumber) => {
if(paramNumber < 0) {
return {
validateStatus: 'error',
errorMsg: 'Number can`t be smaller than 0.'
}
} else if(paramNumber > 1000) {
return {
validateStatus: 'error',
errorMsg: 'Number is too big!'
}
} else {
return {
validateStatus: 'success',
errorMsg: null
}
}
}
One issue may be here in handleKcalEvent
foods[index] = {
kcal: value,
...this.validateParam(value)
}
you aren't changing the kcal of the object at the index, you're changing the object to a new object that just has kcal has a parameter, thereby erasing all of the other information (text, fat, carbs etc.)
try something like
const current = foods[index];
foods[index] = {...current,
kcal: value,
...this.validateParam(value)
}
Related
Error is happening because of this line "word.classList.add('tag')". When i was first adding a class here "if (word.includes('#')) {}" i was getting the same error, so i thought i have to push words into new array and loop them again, but the problem is something else.
export default {
data() {
return {
tweets: [],
currentPage: 1,
numberOfPages: 0,
showPagination: 5,
newPage: 0,
text: [],
arrayOfWords: [],
}
},
methods: {
getTweets(newCurrent) {
this.tweets = []
const API_URL = `${this.$server}/api/twitter/tweets`
const params = {
token: getUserToken(),
page: this.$route.query.page,
newCurrentPage: newCurrent,
}
axios.post(API_URL, null, { params }).then(res => {
this.currentPage = res.data.page
this.numberOfPages = res.data.numberOfPages
res.data.tweets.forEach(tweet => {
const tweetData = {
id: tweet.id,
tweet_text: tweet.tweet_text,
twitter_name: tweet.twitter_name,
twitter_username: tweet.twitter_username,
added_at: moment(String(tweet.added_at)).format('MM/DD/YYYY hh:mm'),
}
this.tweets.push(tweetData)
this.text.push(tweet.tweet_text)
})
this.tweets.forEach(tweet => {
tweet.tweet_text.split(' ').forEach(word => {
if (word.includes('#')) {
this.arrayOfWords.push(word)
}
})
})
this.arrayOfWords.forEach(word => {
word.classList.add('tag')
console.log(word)
})
})
},
}
word is a string I think it has no classList, you can add classList to it if you like
word.classList = word.classList || []
I'm using Vue js to display and edit details of a person. The person being edited has a list of favourite colours that I want to display as a list of checkboxes. When I change the colours selected, and click the 'Update' button, the person object should be updated accordingly, so I can pass back to the api to update.
I've got as far as displaying the Person object's colours correctly against their respective checkboxes. But I'm struggling with passing the changes to the colour selection, back to the Person object. Below is my checkbox list and details of how I've tried to implement this. Is there a better way of doing this?
I've tried using 'b-form-checkbox-group'. Below is my code.
Please note - The list of available colours is dynamic, but I've temporarily hardcoded a list of colours ('colourData') till I get this working.
Also, in the 'UpdatePerson' method, I've commented out my attempts to get the selected colours mapped back to the Person object.
<template>
<form #submit.prevent="updatePerson">
<b-form-group label="Favourite colours:">
<b-form-checkbox-group id="favColours"
v-model="colourSelection"
:options="colourOptions"
value-field="item"
text-field="name">
</b-form-checkbox-group>
</b-form-group>
<div class="container-fluid">
<b-btn type="submit" variant="success">Save Record</b-btn>
</div>
</form>
</template>
<script>
import service from '#/api-services/colours.service'
export default {
name: 'EditPersonData',
data() {
return {
personData: {
personId: '',
firstName: '',
lastName: '',
colours:[]
},
colourData: [
{ colourId: '1', isEnabled: '1', name: 'Red' },
{ colourId: '2', isEnabled: '1', name: 'Green' },
{ colourId: '3', isEnabled: '1', name: 'Blue' },
],
selectedColours: [],
colourSelection: []
};
},
computed: {
colourOptions: function () {
return this.colourData.map(v => {
let options = {};
options.item = v.name;
options.name = v.name;
return options;
})
}
},
created() {
service.getById(this.$route.params.id).then((response) => {
this.personData = response.data;
this.colourSelection = response.data.colours.map(function (v) { return v.name; });
this.selectedColours = response.data.colours;
}).catch((error) => {
console.log(error.response.data);
});
},
methods: {
async updatePerson() {
//const cs = this.colourSelection;
//const cd = this.colourData.filter(function (elem) {
// if (cs.indexOf(elem.name) != -1) { return elem;}
//});
//this.personData.colours = [];
//this.personData.colours = cd;
service.update(this.$route.params.id, this.personData).then(() => {
this.personData = {};
}).catch((error) => {
console.log(error.response.data);
});
},
}
}
</script>
Any help wold be much appreciated.
Thanks
I got this working by making the below changes to the commented part in the 'updatePerson()' method:
methods: {
async updatePerson() {
const cs = this.colourSelection;
const cd = this.colourData.filter(function (elem) {
if (cs.some(item => item === elem.name)) { return elem; }
});
this.personData.colours = [];
this.personData.colours = cd;
service.update(this.$route.params.id, this.personData).then(() => {
this.personData = {};
}).catch((error) => {
console.log(error.response.data);
});
}
}
In a Reducer of ngRx I'm trying to create a single item from an item matching an if condition, but getting the empty item instead. Please, help!
Here is the Reducer code:
on(rawSignalsActions.changeRangeSchema, (state, { rangeSchemaName }) => ({
...state,
engagementSignal: state.rangeSchemas.map(
item => {
if(item.mapping.rangeSchemaName === rangeSchemaName){
let engagementSignal: EngagementSignal=
{
id:0,
name:'',
metaSignalName:'',
rangeSchemaName:'',
type:2,
mappedGraphSignals:[],
signalInputs:[]
};
engagementSignal.id = item.mapping.id;
engagementSignal.name = item.mapping.rangeSchemaName;
engagementSignal.metaSignalName = item.mapping.metaSignalName;
engagementSignal.rangeSchemaName = item.mapping.rangeSchemaName;
engagementSignal.signalCounts = item.signalCounts;
engagementSignal.type = item.mapping.type;
engagementSignal.mappedGraphSignals = item.abstractSignals.map(
signal => {
let mappedGraphSignal: MappedGraphSignal = {
id:0,
name:'',
totalValues:0,
uniqueUsers:0,
mappedAttitudes:[],
signalRange:[]
};
mappedGraphSignal.id = signal.abstractSignal.id;
mappedGraphSignal.name = signal.abstractSignal.name;
mappedGraphSignal.totalValues = 1234; //dummy values for now
mappedGraphSignal.uniqueUsers = 1234;
mappedGraphSignal.mappedAttitudes = signal.signalAttitudes;
if (signal.numericMappings) {
mappedGraphSignal.signalRange = signal.numericMappings;
} else {
mappedGraphSignal.signalRange = signal.textMappings;
}
return mappedGraphSignal;
}
);
//dummy values for now
engagementSignal.signalInputs = [
{
value: '0',
count: 2376
},
{
value: 'no',
count: 3423
},
{
value: '1',
count: 1264
},
{
value: 'yes',
count: 5423
}
];
return engagementSignal;
}
}
)[0],
linkedRangeSchema: something
})),
I want to get a single item object instead of an array, discarding the rest of array.
When I debug the App, after passing the map function, I got engagementSignal value as:
By applying the filter on array, followed by map function solved the problem!
Here is the working code snippet:
on(rawSignalsActions.changeRangeSchema, (state, { rangeSchemaName }) => ({
...state,
engagementSignal: state.rangeSchemas.filter(item =>item.mapping.rangeSchemaName === rangeSchemaName).map(
item => {
let engagementSignal: EngagementSignal=
{
id:0,
name:'',
metaSignalName:'',
rangeSchemaName:'',
type:2,
mappedGraphSignals:[],
signalInputs:[]
};
engagementSignal.id = item.mapping.id;
engagementSignal.name = item.mapping.rangeSchemaName;
engagementSignal.metaSignalName = item.mapping.metaSignalName;
engagementSignal.rangeSchemaName = item.mapping.rangeSchemaName;
engagementSignal.signalCounts = item.signalCounts;
engagementSignal.type = item.mapping.type;
engagementSignal.mappedGraphSignals = item.abstractSignals.map(
signal => {
let mappedGraphSignal: MappedGraphSignal = {
id:0,
name:'',
totalValues:0,
uniqueUsers:0,
mappedAttitudes:[],
signalRange:[]
};
mappedGraphSignal.id = signal.abstractSignal.id;
mappedGraphSignal.name = signal.abstractSignal.name;
mappedGraphSignal.totalValues = 1234; //dummy values for now
mappedGraphSignal.uniqueUsers = 1234;
mappedGraphSignal.mappedAttitudes = signal.signalAttitudes;
if (signal.numericMappings) {
mappedGraphSignal.signalRange = signal.numericMappings;
} else {
mappedGraphSignal.signalRange = signal.textMappings;
}
return mappedGraphSignal;
}
);
engagementSignal.signalInputs = [
{
value: '0',
count: 2376
},
{
value: 'no',
count: 3423
},
{
value: '1',
count: 1264
},
{
value: 'yes',
count: 5423
}
];
return engagementSignal;
}
)[0],
linkedRangeSchema: something
})),
I have a dynamic form that has more than one dropdown and one of dropdown dependent another. The problem is that I couldn't populate the dependent dropdown.
jobDepartmentDropdownOnChange(e: any) {
this.personnelRecruitmentInfoService.getAllByJobDepartmentId(e.value).subscribe(
res => {
if (res.code === ResponseCode.success) {
res.dataList.map(item => {
this.personnels.push({
value: item.personnel.id.toString(),
label: item.personnel.dataValue
});
});
if (this.formComponent !== undefined) {
this.formComponent.form.controls['personnelId'].patchValue(this.personnels);
}
}
}
);
}
const personnelDropdown = new InputDropdown({
key: 'personnelId',
label: '',
options: this.personnels,
value: '',
disabled: true,
required: false,
multiple: true,
order: 20
});
public personnels: any[] = [];
const jobDepartmentDropdown = new InputDropdown({
key: 'jobDepartmentId',
label: '',
options: this.jobDepartments,
value: '',
onChange: this.jobDepartmentDropdownOnChange.bind(this),
disabled: true,
required: false,
multiple: true,
order: 19
});
export class InputDropdown extends InputBase<string> {
controlType = 'dropdown';
options: { value: string, label: string }[] = [];
showSelect = false;
multiple = false;
constructor(options: {} = {}) {
super(options);
this.options = options['options'] || [];
this.showSelect = options['showSelect'] || false;
this.multiple = options['multiple'] || false;
}
}
How can I populate personnelId dropdown according to the previous dropdown?
You would be way better of using a subject for your personnels over triggering angulars change detection cycle way too often performance wise. But if you simply wonder why your solution doesn't work regardless of performance, you're pushing elements in your personnels object not actually changing the reference held by this.personnels. This means the angular change detection won't be triggered. If you do want to trigger the change detection, alter your "push" like this:
jobDepartmentDropdownOnChange(e: any) {
this.personnelRecruitmentInfoService.getAllByJobDepartmentId(e.value).subscribe(
res => {
if (res.code === ResponseCode.success) {
res.dataList.map(item => {
// Use the spread operator to create a new array hence
// updating the reference in the object angular detects changes upon.
this.personnels = [...this.personnels, {
value: item.personnel.id.toString(),
label: item.personnel.dataValue
}];
});
if (this.formComponent !== undefined) {
this.formComponent.form.controls['personnelId'].patchValue(this.personnels);
}
}
}
);
}
I found solution:
const jobDepartmentDropdown = new InputDropdown({
key: 'jobDepartmentId',
label: '',
options: this.jobDepartments,
value: '',
onChange: this.jobDepartmentDropdownOnChange.bind(this),
disabled: true,
required: false,
multiple: true,
order: 19
});
((this.inputs as InputBase<any>[]).find(i => i.key === 'personnelId') as InputDropdown).options = options;
I created a component and a module for a functionality X and I'm using Vuex for state management. The code works for the every first time insertion, but after this the Getter function always returns the same value of the input before the action ends and commit the mutation.
For example:
1 - everything is [0,0,0] and Getter is [0,0,0]. Insert 9 in the first position and the value is inserted.
2 - On the second time, the check if the value inserted is equal of what is on the state returns true, so we had to remove this verification.
By the way, the state continues to be modified without the action commit the changes to mutation, and when we look to the Getter (who retrieves the value from the state) the value inserted is already returned by the Getter.
Someone know how to fix this?
Here is the code
component:
Vue.component('profundidade-cell', {
data: function () {
return {
valorProfundidade: [0, 0, 0],
id: this.face + '-' + this.dente,
ids: [
this.face + '-profundidade-sondagem-' + this.dente + '-1',
this.face + '-profundidade-sondagem-' + this.dente + '-2',
this.face + '-profundidade-sondagem-' + this.dente + '-3'
],
changedId: null,
valorInserido: null,
valorAnt: null,
}
},
props: {
arcada: String,
sextante: String,
dente: String,
face: String,
face_json: String,
max_length: Number,
min_value: Number,
max_value: Number,
},
computed: {
profundidadeSondagem() {
return store.getters['profundidadeSondagem/profundidadeSondagem']({arcada: this.arcada,
sextante: this.sextante, dente: "dente_" + this.dente, face: this.face_json});
},
presente() {
return store.getters.dentePresente({arcada: this.arcada, sextante: this.sextante,
dente: "dente_" + this.dente});
}
},
created: function() {
this.debouncedAlterarProfundidade = _.debounce(this.alterarValorProfundidadeSondagem, 400);
this.$root.$on("vuex-carregado", this.carregar);
},
methods: {
getValue(e) {
this.changedId = e.target.id;
this.valorInserido = e.target.value;
this.debouncedAlterarProfundidade();
},
alterarValorProfundidadeSondagem() {
let modelRefs = {};
let patologia = {
arcada: this.arcada,
sextante: this.sextante,
dente: "dente_" + this.dente,
face: this.face_json,
valor: this.valorProfundidade,
modelRefs: modelRefs,
id: this.changedId,
valorInserido: this.valorInserido,
};
store.dispatch('profundidadeSondagem/MODIFY', patologia).catch(() => {
this.valorProfundidade = this.profundidadeSondagem;
})
},
carregar(){
this.valorProfundidade = this.profundidadeSondagem;
}
},
template: `
<div>
<input type="text" :id=ids[0] v-on:input.prevent="getValue($event)" :maxlength=max_length v-model=valorProfundidade[0] class="periograma-input col l4" v-bind:class="{ 'invisible': !presente }" />
<input type="text" :id=ids[1] v-on:input.prevent="getValue($event)" :maxlength=max_length v-model=valorProfundidade[1] class="periograma-input col l4" v-bind:class="{ 'invisible': !presente }" />
<input type="text" :id=ids[2] v-on:input.prevent="getValue($event)" :maxlength=max_length v-model=valorProfundidade[2] class="periograma-input col l4" v-bind:class="{ 'invisible': !presente }" />
</div>
`
});
module:
const moduleProfundidadeSondagem = {
namespaced: true,
actions: {
MODIFY({commit, dispatch, getters, rootGetters}, obj) {
let patologia = {
face: rootGetters.getNomeFace(obj.face),
dente: rootGetters.getNomeDente(obj.dente),
local: "FACE",
ficha: this.state.idPeriograma,
descricao: obj.valor.toString(),
paciente: this.state.idPaciente,
tipo: 'PROFUNDIDADE_DE_SONDAGEM'
};
if(obj.valor) != getters.profundidadeSondagem(obj)) {
let reg = new RegExp(/([0-9],[0-9],[0-9])/);
let param = null;
return new Promise((resolve, reject) => {
if(obj.valor[0] == 0 && obj.valor[1] == 0 && obj.valor[2] == 0) {
param = axios.delete('/patologia', {data: patologia});
} else if (reg.test(obj.valor)){
param = axios.post('/patologia', patologia);
}
if(param != null) {
param.then(function (response) {
if(response.status == 200 || response.status == 201 && response.data) {
commit('armazenarProfundidadeSondagem', obj);
let dentes_data = {};
let face = '';
if (obj.arcada == 'arcada_superior' && obj.face == 'face_lingual_palatal') {
face = 'palatina'
} else {
face = obj.face.split('_')[1];
}
let classe_canvas = rootGetters.getNomeClasseCanvas(obj, face);
drawGraph(rootGetters.prepareDentesData(obj, face, dentes_data), face,
classe_canvas);
resolve();
}
}).catch(error => {
store.dispatch('mensagemAlerta/ALERTA', {
tipo: 'error',
mensagem: 'Não foi possível cadastrar o nível de sondagem'
});
reject(error);
});
}
})
}
},
RESET_PROFUNDIDADE_SONDAGEM({commit}, ob) {
commit('RESET_ALL', ob);
}
},
getters: {
profundidadeSondagem: (state, getters, rootState) => obj => {
return rootState[obj.arcada][obj.sextante][obj.dente][obj.face].profundidade_sondagem;
}
},
my guess is your issue lies here:
TL;DR - you pass your getter as valor to your action.
only a guess - as i cant debug your code
store.dispatch('profundidadeSondagem/MODIFY', patologia).catch(() => {
this.valorProfundidade = this.profundidadeSondagem;
})
as you assign a reference from your rootState[...] and thus you change the properties of the rootState[...] in your component past the first run.
So your code then behaves like:
let patologia = {
arcada: this.arcada,
sextante: this.sextante,
dente: "dente_" + this.dente,
face: this.face_json,
// valor: this.valorProfundidade,
///* same as */ valor: this.profundidadeSondagem,
/* same as */ valor: this.$store.getters['profundidadeSondagem/profundidadeSondagem'](...),
modelRefs: modelRefs,
id: this.changedId,
valorInserido: this.valorInserido,
};
A solution can be to this.valorProfundidade = this.profundidadeSondagem.slice(); as long it is an array or Object.assign({},...) - so you prevent the references