so I have a complex nested structure that is like so in my Vue app's data:
{
x: {
y: [{
z: {
a: 1
}
}]
}
}
Although I used v-model in a v-for with the child property, setting .z.a = 2 doesn't seem to trigger this in the UI. I figured ok, must be that I'm mutating a property without alerting Vue, no biggie I just need to use Vue.set.
So I tried the following:
Vue.set(app.x.y[0].z, "a", 2)
Vue.set(app.x.y[0], "z", {a:2})
Vue.set(app.x.y, 0, app.x.y[0]) // app.x.y[0] is definitely {z:{a: 2}}
Vue.set(app.x, "y", app.y)
app.x.y = app.x.y.map(_ => _)
While these all usually do the trick for me, in this case it doesn't seem to work. If it changes things, I'm using v-model instead of a traditional prop, so it would be synced back to the app. I wonder if perhaps this disassociates the app.x and the actual data property for x.
I'm looking for a way to trigger a DOM update or properly set the value in Vue. I've also tried an app.$forceUpdate() to no avail :/
EDIT:
While I wasn't able to make Vue observe the change by itself, I found that I had a function that was populating z after it had been initialized to {}. I assume Vue set watchers on z the moment it was initialized, and so did not observe any further changed (i.e. adding a in the next line). Changing this to populate every possible property on initialization, combined with any of the .set's above and a $forceUpdate, I was able to trigger a DOM update. It's a temporary workaround though and I'd really like to be able to have Vue automatically observe this update.
You can try the vue computed property or watcher. This will automatically detect the changed in your data and update the v-model data you have.
In this example a change in the returned value of message will automatically be applied to the input.
<input v-model="message">
computed: {
message(){
return {x:{y:[1,2,3]}}
}
}
Related
I have a simple array of ints that I'm displaying on a page.
This is my model:
var Favorite = Ember.Object.extend({
stuff: Ember.A([1,2,3,4])
});
This is my template:
{{#each model.stuff as |num|}}
<li>{{num}}</li>
{{/each}}
In my controller, modifications to this array generally display on the page (such as pushObject()), but modifying elements directly does not cause the page to update. I have a button on my page linked to this controller action:
actions: {
arrayAdd() {
this.get('model').stuff[0] = 100;
}
}
Clicking the button modifies the underlying array, but doesn't update the page. Is there a way to have ember automatically pick up on that change?
I'm doing this in Ember 1.13
Actually the equivalent of arr[idx] = foo for an ember array is arr.replace(idx, 1, [foo]).
The other thing you could do is to call this.get('model').notifyPropertyChange('stuff') after you manually edited the array.
In Ember, you need to use KVO(key value observer) compliant methods so that it will trigger computed property recalculation and observer and update the template. Always we need to use get for getting the properties and set for setting the values. if you didn't follow ember will throw assertion error sometime.
For array there are KVO methods which is equivalent to standard method.
Standard Method -> Observable Equivalent
pop -> popObject
push -> pushObject
reverse -> reverseObjects
shift -> shiftObject
unshift -> unshiftObject
In your case, you need to update it like the below, reference twiddle
arrayAdd() {
this.get('model.stuff').unshiftObject(100);
}
Note: You can declare array stuff: [1,2,3,4] it's good to initialize it in init method.
I still feel the array indexer should properly update the value,
though
Interestingly in glimmer component, you don't need to use getters/setters.
I have this Vue.js code:
new Vue({
data:{
myValue:'x',
myOtherValue:'y'
},
computed: {
myComputed: myFunction(){
return this['my' + 'Value']
}
}
})
As you can see the computed property will be cached and it is depended only on data.myValue. My question is how Vue.js caching system knows that run the computed function again only if myValue is changed?
If I change the myOtherValue variable, the myComputed function will use the cache, and will not be run again will I call it.
I thought about several ways how it is possible. But how Vuejs doing that?
I have read this article: https://v2.vuejs.org/v2/guide/computed.html and found no answer.
And what happen in this code, what it will be depeneded on?
const flag=2
new Vue({
data:{
myValue:'x',
myOtherValue:'y'
},
computed: {
myComputed: myFunction(){
if (flag==1){
return this['my' + 'Value']
}
else
return this['my' + 'Other' + 'Value']
}
}
})
Bonus: I will appreciate I link to the relevant function in the VueJS code: https://github.com/vuejs/vue
I will address only the specific question how does vue.js know which dependencies affect which computed property?
The simple answer is that each time vue evaluates a computed property it creates a map of all the reactive properties that were accessed in the span of that call. The next time any of these reactive properties change they will trigger a reevaluation of the computed property.
If during the most recent evaluation of a computed property, one of its reactive dependencies is never reached (maybe because it is within the non-traveled path of an if/else construct), subsequent changes to that reactive property will not trigger a reevaluation of the computed property.
Observe this behavior by modifying the two reactive properties in this fiddle (by simply typing in their corresponding input boxes). A few things to note:
the called computed property is evaluated once on document load (it's triggered because it's rendered in the template).
because the path is set to 1 the reactive property that will be mapped as a dependency is val1. As a result it will be the only one that can trigger a reevaluation of called when it changes. The value of val2 can also change but will not have the same effect on called, even though it's clearly present in the function.
When you click on the "Change Path" button, path is toggled from 1 to 2.
right after the path switch, note that a change to val1 will affect called only once more. Because path has been set to 2 prior to that last reevaluation, val1 will not be reachable and will not be mapped as a dependency of called any longer. Subsequent changes to its value won't trigger a reevaluation of called from that point on. But then val2 has now been mapped as a dependency of called and changes to it trigger the reevaluation the same way they did for val1 earlier. It will be so until the next path toggle from 2 back to 1.
Here's the code.
let path=1
let count=0
const vm=new Vue({
el:"#app",
data:{
val1:null,
val2:null,
},
computed: {
called: function(){
if (path==1){
this.val1
}
if (path==2){
this.val2
}
return "I was just called "+ ++count +" times"
}
},
methods: {
changePath(){
path = path==2 ? 1 : 2
}
}
})
and corresponding template
<div id="app">
<input v-model="val1"/> {{val1}}
<br>
<input v-model="val2"/> {{val2}}
<br>
<button #click="changePath">change path</button>
<br>
{{ called }}
</div>
It's the reactivity system of Vue.js, not a caching system.
The data in a component will be convert to getters and setters. When you access a value via a getter, the getter will add it to the dependencies, and when you modify the value via a setter, the setter will notify everyone who depends on the value.
Here is the source code, all the magic happens in this function: https://github.com/vuejs/vue/blob/dev/src/core/observer/index.js#L131
From the docs it reads that:
Computed properties are cached, and only re-computed on reactive dependency changes.
However the following fiddle shows something a bit different.
https://jsfiddle.net/z11fe07p/267/
From the fiddle if you set the flag to 2, the computed property will be re-evaluated and executed if you change myOtherValue, however this will not happen if the flag is set to 1. I think it keeps track of your if conditions.
In the docs usually you can find links to the relevant source code.
Here is the code for computed properties:
https://github.com/search?utf8=%E2%9C%93&q=repo%3Avuejs%2Fvue+extension%3Ajs+%22computed%22&type=Code
I'm generating a JSON with a random set of X's and O's and trying to plot them into a simple grid using a custom element in polymer. When I first open the page everything runs fine and i see a different grid each time. I've also added a button on an index.html page that regenerates the JSON with a new set of X's and O's, but the polymer element wont flag an event change or update its child elements with the new data.
It only seems to be an issue with my JSON object, because if i change it to a string, i get a change notification each time...
i have written a simple "forceDB.js" script that generates the JSON and passes it to the polymer element with .setAttribute('layout', data) how do I notifiy the change to polymer and have all the children elemtents of my polymer script update?
The JSON object looks like this
let data = {
"a1":"",
"a2":"",
"a3":"",
"b1":"",
"b2":"",
"b3":"",
"c1":"",
"c2":"",
"c3":""
};
my polymer script side of the element looks like this...
enter code here
<script>
Polymer({
is:'grid-layout',
properties:{
layout: {
type: Object,
reflectToAttribute : true
},
observers: 'layoutChanged(layout.*)'
},
setLayout: function(newdb){
console.log('new - ' + JSON.stringify(newdb));
this.set('layout', newdb);
},
layoutChanged: function(changedthing){
alert("Layout Changed!");
},
});
</script>
I think that I may be missing a key point in polymer or maybe I'm doing something wrong. But I have a simple X's and O's game that I'm developing to try come to grips with polymers data binding principals and seem to be falling short where.
Could it be that the layout property needs:
notify: true
And it might be helpful to see how you are data binding the layout property to the child elements in the HTML.
Building a project using Vue.js (and Laravel), the following (greatly simplified) code results in the below error:
Vue component:
<template>
<input type="text" class="form-control" v-model="main_object[item_id][my_answer_key]">
</template>
<script>
export default {
props: [
],
data() {
return {
main_object: {},
item_id: '1234',
my_answer_key: '5678'
}
},
ready: function () {
vm = this;
},
methods: {
}
}
</script>
Error received:
We know you can use the vm.$set() method to add properties to the object. However, we’re building the model path on the fly (item_id and my_answer_key change depending on various user options being selected). It seems like we have to write a method that determines if the object property is already set, and if it's not set, to then set it. Is there a better way to accomplish the above?
You could seemingly get around this by using the created hook and $set:
created: function () {
this.$set(this.item_id + "." + this.my_answer_key, "")
}
However, if item_id and my_answer_key can change, this approach will ultimately not work because Vue does not have dynamic two way binding. In other words, the binding in your v-model will be created once and will not change later if either of the item_id or my_answer_key values change.
So, to accomplish something like this, you might need to resort to a kludge like using a v-if and toggling it to destroy and recreate the input (and it's binding). That might work.
Sometimes, computed's can help with these situations. Bind your input to a simple attribute on your data model and use a computed to generate the actual nested data model you need elsewhere.
I have an object in an array
var
sidelist = [
{
name:"MURICA",
types:[...]
}
];
I have a box that displays the object's name. Then I have a text field and a button. On button press the object's name gets set to text field value. But I don't know how to make the name in the box change accordingly.
As I understand putting the object in a session variable is not an option since I will not be able to modify properties of objects inside of it without resetting the whole session var. I tried it and failed.
html
<template name="asdf">
{{#with object}}
<div>{{name}}</div>
{{/with}}
</template>
js
Template.asdf.object = function() {
return Objects.findOne(...);
};
EDIT
I think I've got your question wrong, sorry. If you have a value in memory that you'd like to change and have the DOM updated, use dependencies:
html
<template name="asdf">
{{property}}
</template>
js
var property;
// Create new dependency object that will manage refreshing property value:
var _dep = new Deps.Dependency;
updateProperty = function(value) {
property = value;
// Whenever you change value of the property, call changed() function:
_dep.changed();
};
Template.asdf.value = function() {
// Within reactive function, call depend() to rerun the function
// each time the value is changed:
_dep.depend();
return value;
};
How about a different and in my opinion simpler solution - using a local collection for your data.
I am not sure exactly why do you keep that sort of data into an array, but if it is because you only need it on the client then you can instead create a local collection and have all the reactivity benefits without writing all that code for making the array reactive. The data stored in a local collection is never sent to the server, so no communication or storage overhead.
You'd do it like that:
Sidelist = new Meteor.Collection(null);
[EDIT] Put the above line in your client-side-only part of the code.
Notice the null parameter. This will give you a collection that is only stored on the client and is a regular Meteor reactive source. Then you go about using it in your code and html just as you would a normal collection.
Hope that helps.