I have an Aurelia app using Store to manage state between components.
In my dropdown component I have validation (not framework validation, just code which should get invoked in the ViewModel on change) which should fire when the value changes:
<select value.bind="parameter.value"
change.delegate="valueChanged()"
class.bind="isValid ? '' : 'has-error'">
...
</select>
In the ViewModel the validation works like this:
#bindable() parameter: Parameter;
parameterChanged() {
this.validate();
}
valueChanged() {
this.validate();
}
private validate() {
this.isValid = this.parameter.value != '0';
}
The Parameter model looks like:
export interface Parameter {
value: string;
...
}
The Parameter is passed down to this component by a parent component where the value can change on a state object managed with Store.
The value can change when the following action gets invoked to change the value on the State object:
export async function changeValue(state: State, value: string) {
const newState = Object.assign({}, state);
newState.setup.parameter.value = value;
return newState;
}
When the parameter value changes on the state object the dropdown visibly changes on the screen, but parameterChanged() or valueChanged() do not fire.
Does anyone know what is happening here and anything I can try to resolve this? Any help appreciated...
Because I am using Aurelia Store I should have been using a state changed subscription as follows:
#connectTo({
selector: {
parameter: (store) => store.state.pipe(pluck("parameter"))
}
})
parameterChanged() {
this.validate();
}
The reasons why this wasn't working as expected are:
valueChanged() is bound to the element's change function, since the value is changing this will not fire.
parameterChanged() does not fire because parameter hasn't changed, the value property of parameter is changing
Related
I'm using Vue in vanilla JS and have a property defined in my data of type string which looks like this
data() {
return {
DimensionSetting: { type : String }
}
}
I have an element in my template that I want to toggle off when a value is passed into DimensionSetting however I can't figure out how I need to check for it in the v-if logic. I tried v-if="!this.DimensionSetting" and v-if="this.DimensionSetting === undefined" and v-if="this.DimensionSetting === null". None of these make the element visible when the value is empty. What do I need to do to properly check that kind of property?
It looks like you're incorrectly mixing a data property declaration with a props declaration.
If DimensionSetting is supposed to be a public property that receives values from a parent component, it should be declared under props:
export default {
props: {
DimensionSetting: {
type: String,
}
}
}
On the other hand, if DimensionSetting is supposed to be a local property, private to the component itself, then it should be returned from data(). There is no type field like there is for props declarations:
export default {
data() {
return {
DimensionSetting: ''
}
}
}
In either case, using the ! operator on the prop should be enough to check for an empty string:
<p v-if="!DimensionSetting">Empty</p>
demo
try adding,
data(){
return{
DimensionSetting: { type : String ,default:false}
}
}
and then v-if="!DimensionSetting"
So I have the following piss of code in my child component
props: {
prop_accounts: Array,
prop_pushing_destination: String,
prop_selected_account: String,
prop_selected: Boolean,
shop_settings: Object,
name_of_selected_account_field: String
},
data() {
return {
accounts: this._.cloneDeep(this.prop_accounts),
pushing_destination: this._.cloneDeep(this.prop_pushing_destination),
selected_account: this._.cloneDeep(this.prop_selected_account),
selected: this._.cloneDeep(this.prop_selected)
}
},
The parent props pass all the props and all seams to work well but the parent is constantly sampling the backend for changes and if they acquire it updates the props of child and although I can see that props are changed the data stays the same now if I throw the data and use props directly all works well but I get the following warning
Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "selected_account"
There are two ways you could handle this: use the props directly and emit changes to the parent; or use computed properties to compute the value based on the data and props.
Emitting changes is probably what you want to do 99% of the time as any changes to the props either internal or external will change what your component is doing. Using computed props allows for changes to the props to be used only if the data hasn't been modified internally.
Computed props
props: {
defaultAccounts: Array,
defaultSelected: Boolean,
...
}
data: () => ({
customAccounts: null,
customSelected: null,
})
computed: {
accounts() {
return (this.customAccounts == null) ? this.defaultAccounts : this.customAccounts
},
selected() {
return (this.customSelected == null) ? this.defaultSelected : this.customSelected
}
}
You could even define setters on the computed props to set the value of the data properties.
Emit changes
Component:
props: {
accounts: Array,
selected: Boolean,
...
}
methods: {
accountsChanged(value) {
this.$emit('update:accounts', value)
},
selectedChanged(value) {
this.$emit('update:selected', value)
}
}
Where you use component:
<my-component :accounts.sync="accounts" :selected.sync="false"></my-component>
See Sync Modifier Documentation for more info.
I haven't tested this code so it may need tweaking to get it working correctly.
How can I set the fields in my form that are wrapped in ValidationProvider to touched when submitting a form. My current code is as follows using the ValidationObserver with a ref of "observer" to wrap the form. This changes the fields object in the observer but does not reflect in my ValidationProvider as being touched as I only show error when touched and error exists and the touched part is not being triggered.
onSubmit () {
const observer = this.$refs.observer as any
return observer.validate().then((valid: boolean) => {
if (!valid) {
for (const field in observer.fields) {
observer.fields[field].touched = true
observer.fields[field].untouched = false
}
}
return valid
})
}
I'm a newbie in Vuejs. I'm trying passing computed with param to props of child component but it's error.
This is my code:
<FloatingInput
:type="'text'"
:name="'username'"
:error="fieldError('username')"
>
<FloatingInput
:type="'password'"
:name="'password'"
:error="fieldError('password')"
>
And in the script:
computed: {
fieldError: {
get: function () {
return this.error[field]; // will return false or message error
},
set: function (field) {
this.error[field];
}
},
}
Computed properties are meant to be pure. This means that computed properties rely solely on the state of the component, and should not have side-effects. This allows Vue to only recalculate computed properties whenever the data they rely on changes. For this reason you can not call a computed property. You must use a method.
Luckily for you, what you want to do is just a key lookup in an object, so you can just use a data attribute and lookup the field.
<FloatingInput
type="text"
name="username"
:error="fieldErrors['username']"
>
data () {
fieldErrors: {}
},
methods: {
setFieldError(field, error) {
this.$set(this.fieldErrors, field, error);
}
}
I have a situation where I need to update data when it detects changes to a state. The user needs to be able to make further changes this info within a textarea. Using computed properties pulls in the data exactly how I want, but any changes made by the user after this are overridden because the computed property keeps changing this data back to it's initial values. What would be the best way to pull in data initially upon a state change but then allow for editing after that point?
Thanks!
Edit: Updated to what i've tried for #Libby.
<textarea v-model="exampleData"></textarea>
computed: {
...mapGetters({
item: 'item'
})
methods: {
exampleFunction() {
this.exampleData = this.item;
}
mounted() {
this.exampleFunction();
}
Update exampleData in a watcher for item:
watch: {
item(value) {
this.exampleData = value;
}
}
This way you can bind your exampleData to the textfield, but changes to the item will still affect it.
And if you want exampleData to be initially set to the value of item, do that in the component's mounted hook:
mounted() {
this.exampleData = this.item;
}
Here's a fiddle.
If you set your property indata, you can initialize it in mounted which only runs once when the page is loaded:
data:
text: null
mounted: ->
text = "This text is initialized"
And then set v-model on your textarea
<textarea v-model="text"></textarea>
So the value of the textarea will start out as "This text is initialized", but the user will be able to change it, and those changes will be saved in text
Vue already has a built-in solution to handle this if you use the getter/setter syntax for computed properties
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
As a result, when your state changes you can update the computer property by assigning it a value:
// state has changed in text area handler
this.fullName = 'new value'