Disclaimer: This is my first attempt at building an MVVM app I have also not worked with vue.js before, so it could well be that my issue is a result of a more fundamental problem.
In my view I have two types of blocks with checkboxes:
The underlying object is structured like this:
{
"someTopLevelSetting": "someValue",
"blocks": [
{
"name": "someBlockName",
"categryLevel": "false",
"variables": [
{
"name": "someVarName",
"value": "someVarValue",
"selected": false,
"disabled": false
}
]
},
{
"name": "someOtherBlockName",
"categryLevel": "true",
"variables": [
{
"name": "someVarName",
"value": "someVarValue",
"categories": [
{
"name": "SomeCatName",
"value": "someCatValue",
"selected": false,
"disabled": false
}
]
}
]
}
]
}
My objectives
Selecting checkboxes:
Clearing checkboxes
A user can click on a "clear" button, which unchecks all checkboxes in a list (selected=false). This action should also trigger the methods that optionally disables checkboxes and updates icons etc.
My current method (which doesn't seem quite right)
v-model
directive.v-on="change: checkboxChange(this)"
directive. I think I need to do this part differentlyv-on="click: clearList(this)"
The problems with my current setup is that the change event is not firing when the checkboxes are cleared programatically (ie not by user interaction).
What I would like instead
To me the most logical thing to do would be to use this.$watch
and keep track of changes in the model, instead of listening for DOM events.
Once there is a change I would then need to identify which exact item changed, and act on that. I have tried to create a $watch
function that observes the blocks
array. This seems to pick up on the changes fine, but it is returning the full object, as opposed to the individual attribute that has changed. Also this object lacks some convenient helper attributes, like $parent
.
I can think of some hacky ways to make the app work (like manually firing change events in my clearList method, etc.) but my use case seems pretty standard, so I expect there is probably a much more elegant way to handle this.
You could use the 'watch' method.. for example if your data is:
data: {
block: {
checkbox: {
active:false
},
someotherprop: {
changeme: 0
}
}
}
You could do something like this:
data: {...},
watch: {
'block.checkbox.active': function() {
// checkbox active state has changed
this.block.someotherprop.changeme = 5;
}
}
If you want to watch the object as a whole with all its properties, and not only just one property, you can do this instead:
data() {
return {
object: {
prop1: "a",
prop2: "b",
}
}
},
watch: {
object: {
handler(newVal, oldVal) {
// do something with the object
},
deep: true,
},
},
notice handler
and deep: true
If you only want to watch prop1
you can do:
watch: {
'object.prop1' : function(newVal, oldVal) {
// do something here
}
}
Other solution not mentioned here: Use the deep
option.
watch:{
block: {
handler: function () {console.log("changed") },
deep: true
}
}
Since nobody replied and I have solved/ worked around the issue by now, I thought it migth be useful to post my solution. Please note that I am not sure my solution is how these types of things should be tackled, it works though.
Instead of using this event listener v-on="change: checkboxChange(this)"
I am now using a custom directive which listens to both the selected and disabled model attribute, like this: v-on-filter-change="selected, disabled"
.
The directive looks like this:
directives: {
'on-filter-change': function(newVal, oldVal) {
// When the input elements are first rendered, the on-filter-change directive is called as well,
// but I only want stuff to happen when a user does someting, so I return when there is no valid old value
if (typeof oldVal === 'undefined') {
return false;
}
// Do stuff here
// this.vm is a handy attribute that contains some vue instance information as well as the current object
// this.expression is another useful attribute with which you can assess which event has taken place
}
},
The if clause seems a bit hacky, but I couldn't find another way. At least it all works.
Perhaps this will be useful to someone in the future.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.