I'm facing an issue with reactivity in Vue JS 2.6.6. Not sure if it's an issue at all or I'm missing something here.
I'm hydrating an object from MySQL DB through axios getting:
resource:Object
id: 123
alt: null
file:"2a72d890d0b96ef9b758784def23faa1.jpg"
type:"jpg"
}
The form is handling the properties via v-model:
<b-input v-model="resource.alt" />
What I can see is that on blur event, besides no changes were made, the resource.alt property is being changed from null to an empty string ""
resource:Object
id: 123
alt: ""
file:"2a72d890d0b96ef9b758784def23faa1.jpg"
type:"jpg"
}
So what could be the best way to handle this? I don't think that fetching all null fields from DB as empty strings is a nice solution. I mean something like IFNULL(files.alt,'') AS alt
On the other hand, since I fetch a lot of records by doing a loop through them all and setting all null properties to empty string looks very inefficient.
What I need is to keep null properties as null or parse in some way all null properties to empty string from the beginning.
FYI, I'm using vee-validate, so I need to validate if the object has changed with pristine flag which is set to false if the object has been manipulated. This behavior is setting the flag to false because of the change from null to ""
EDIT
This is getting odd. The way I propagate the resource to local data in the component is by clicking an element from a list.
data: () => ({
files: [],
resource: {}
})
<div v-for="file in files" :key="file.id"
#click.exact="handleIndividualCheck(file)">
{{ file.file }}
</div>
methods: {
handleIndividualCheck (item) {
this.resource = { ...item }
}
}
The first time I select an item, the null property is converted to an empty string as explained.
The next times, everything works as expected
This is in fact a bootstrap-vue bug for version 2.19.0
I've reported the issue and fixes will be merged in the next release.
Link to issue: https://github.com/bootstrap-vue/bootstrap-vue/issues/6078
Related
Here is my component for Vueform elements (Textelement, checkboxgroupelement etc)
<component v-for="question, i in questions" :is="`${question.type}-element`"
:name="i" :label="question.label"
:description="question.description"
:items="question.items"
:key="i"
:placeholder="question.placeholder"
:rules="question.rule" />
All things are working correctly except for :rules which is for form validation.
Originally "questions" is an array of objects and computed method is as follows:
computed: {
questions() {
return this.data.questions?.map(q => { console.log(isReactive(q));
return { ...q, rule: [`min:${q.minchars}`, `max:${q.maxchars}`] }
})
},
},
Output shows null even if max and min chars are set correctly.
Heres an output
Please help!
I tried using reactivity on questions array so that rule gets updated , its showing updated values but in output I am getting message "must be at least null characters" issue.
When I have a textarea like
<textarea v-model="foo.abc.text"></textarea>
and either foo or foo.abc does not exist yet then
vue removes either parts of the DOM or is giving me a blank page.
It does never recover.
That alone is annoying, regardless of if I am using a debug version of vue or not.
If I try to use an approach that I have been advised to use earlier like
<textarea v-model="foo?.abc?.text"></textarea>
then I am still out of luck, I presume that I get a "rvalue" using those question marks and what I need rather is a variable location.
How do I, with as little trickery as possible, allow v-model to exist later on even if it doesnt exist now (late binding)?
Just shape your data accordingly and initialize it with empty values:
data(){
return {
foo: {
abc: {
text: ''
}
}
}
}
You can later populate it e.g. with the result of api call, but it's still better to initialize data properly
I would suggest going the :value + #input way. It allow more control over the input model, and does not require hiding it.
<textarea :value="!!foo && foo.abc.text" #input="(val) => !!foo && (foo.abc.text = val)" />
You can even hook in a validator:
<textarea
:value="!!foo && foo.abc.text"
#input="(val) => !!foo && (foo.abc.text = val)"
:rules="v => !v && 'The object has not been initialised'"
/>
I found a solution I can live with and then I got a comment in the same direction:
Conditionally showing the textarea.
v-if seems to do it but it falls under the "trickery" category, I think (angularjs would be more relaxed).
<textarea v-if="foo!=null" v-model="foo.abc"></textarea>
The symptom to hiding components if something is not all correct is not the best part of vue.js. Better show them and color them red.
I am desparately trying to understand what's wrong there and can't figure it out!
I'll try to explain as best as I can, but the code is lengthy and I can't post it easily.
I have a component called "FrameHeader" that includes an input checkbox. This component is called in another component called "Frame", and the frames made from a v-for in another component ("FrameContainer").
In FrameHeader template, I have this:
<input :key="'frame-touchselectbox-'+frameId" type="checkbox"
v-model="touchSelected"
:class="{hidden: !isTouchSelectOn, selectCheckBox: true}"
/>
touchSelected is a computed property defined as such:
computed: {
touchSelected() {
console.log("checking frame touch selected for frame " + this.frameId + " ==> " + store.getters.isFrameTouchSelected(this.frameId));
return store.getters.isFrameTouchSelected(this.frameId);
},
},
where store.getters.isFrameTouchSelected(this.frameId); retrieves a boolean property called "touchSelected" in an object of the state:
The idea is that in the scenario I have, all "touchSelected" properties are first set to false (A), then only the one from one of the frame is set to true (B).
(A):
toggleTouchSelect(state, payload: {frameId: number; toggle: boolean}) {
const newCandidates: number[] = (payload.toggle) ? getAllSiblings(state.frameObjects, payload.frameId): [];
Object.keys(state.frameObjects).forEach((frameKey) => {
Vue.set(
state.frameObjects[parseInt(frameKey)],
"touchSelected",
false
);
Vue.set(
state.frameObjects[parseInt(frameKey)],
"isTouchSelectOn",
newCandidates.includes(parseInt(frameKey))
);
});
},
(B):
touchSelectFrame(state, payload: {frameId: number; isSelected: boolean}) {
Vue.set(
state.frameObjects[payload.frameId],
"touchSelected",
payload.isSelected
);
},
The data I get in the store is correct, I get false/true values where I want them.
However, the checkboxes are not correct. The first time I set one of the frame's property to "true", the corresponding checkbox gets checked. But when I get another frame's property to "true", the previous frame's checkbox doesn't get unchecked. Actually, I see it first being unchecked, then being checked again.
As I said, the data in the state is correct: even when that checkbox revert to checked, the underlying property in the data for that frame is "false".
BUT the weirdest thing is that if only change the checkbox input to a text input (changing the type of the input in the template), the text value is always correct even after the second time I set a frame's property to "true".
So...i'm totally puzzled and can't understand what's happening with those checkboxes.
Sorry for the vague explanation I hope it can still be understandable and that someone will shed a light on that :) Thanks a lot.
Computed props are by default getter-only (reference). That means your checkbox can read the value of touchSelected but can't change its value. You have to use a computed prop with a getter AND a setter. Assuming you have a mutation to change your frameId logic in Vuex:
computed: {
touchSelected: {
get(): {
return store.getters.isFrameTouchSelected(this.frameId);
}
set(newValue): {
store.commit('FRAME_MUTATION', newValue);
}
}
},
I am implementing the component like this:
<place-autocomplete-field
v-model="field"
name="field"
label="Address lookup"
:api-key="api_key.api_key"
placeholder="Start typing here"
#autocomplete-select="onPlaceInput"
>
</place-autocomplete-field>
...
data() {
return {
api_key,
field: null
};
...
While the #autocomplete-select event fires fine, and delivers the selected value, the value displayed in the component's input field does not update on selecting from the place options. All that is in the input field is whatever was typed in there. This is not how it works in the demo on Github. Can anyone spot what I may be doing wrong?
I have a vaadin-checkbox:
<vaadin-checkbox id=[[item.id]] disabled="true" checked="[[item.checked]]">[[item.description]]</vaadin-checkbox>
I defined my properties:
static get properties() {
return {
items: {
type: Array,
notify: true,
value: function() {
return [];
}
}
};
}
When I now change the data by pressing some button:
_selectItem(event) {
const item = event.model.item;
if (item.checked === true) {
this.$.grid.deselectItem(item);
} else {
this.$.grid.selectItem(item);
}
item.checked = !item.checked;
}
The state of the checkbox is still checked="true". Why isnt the checkbox getting updated? The same thing when I change the description of the item:
_selectItem(event) {
event.model.item.description = 'test';
}
The test description is never appearing. The checkbox is never getting updated.
The reason why the checkbox does not get updated by the button click handler is in the Polymer 2 data system. Polymer does not detect the change and does not update the template accordingly.
In order to make the change in a way that Polymer would detect it you have two options:
Use this.set(`items.${event.model.index}.checked`, !item.checked) if you can reliably assume that the index used by dom-repeat always matches that elements's index in the items array (it is not the case if you use sorting or filtering features of dom-repeat). See an example here https://jsfiddle.net/vlukashov/epd0dn2j/
If you do not know the index of the updated item in the items array, you can also use the Polymer.MutableData mixin and notify Polymer that something has changed inside the items array without specifying the index of the changed item. This is done by calling this.notifyPath('items') after making a change. However, this requires that your element extends the Polymer.MutableData mixin, and that dom-repeat has the mutable-data attribute set. See an example here: https://jsfiddle.net/vlukashov/epd0dn2j/24/
More information on this in the Polymer 2 docs.