I need to display value for month april. Code:
{{my_dates['2018-04-23']}}
displays:
{
"april":0,
"may":0,
"june":0,
"july":0,
"august":0,
"september":0,
"october":0,
"income_trips":"0.00",
"med_services":"0.00",
"food_services":"0.00",
"accom_services":"0.00",
"collegium":"0.00",
"parking":"0.00",
"wash":"0.00",
"other":"0.00",
"balance":"0.00",
"employees":0,
"season_employees":0,
"complaints":0,
"reviews":0
}
I tried:
{{my_dates['2018-04-23']['april']}}
it's display 0, but I am getting error:
[Vue warn]: Error in render: "TypeError: Cannot read property 'april' of undefined"
The follow json should be in my my_dates http://vpaste.net/3A0Th
Code of app:
var app = new Vue({
el: '#app',
data: {
my_dates: {},
},
methods:
{
getTableData: function()
{
// GET /someUrl
this.$http.get('http://127.0.0.1:8000/ponizovka_get_data').then(response => {
// get body data
this.my_dates = response.body;
}, response => {
// error callback
});
}
},
created: function(){
this.getTableData()
}
})
{{ my_dates['2018-04-23']['april'] }}
You're right. This is the correct way to access this property, but the error could be related to this value been display before assignment or async operation. You can fix by checking on v-if, using short-circuit, using a computed property (#EmileBergeron suggestion) or even a method.
Fix by checking on v-if
<div v-if="my_dates && my_dates['2018-04-23']">
{{ my_dates['2018-04-23']['april'] }}
</div>
Fix using short-circuit
{{ my_dates && my_dates['2018-04-23'] && my_dates['2018-04-23']['april'] }}
Fix with a computed property (#EmileBergeron suggestion)
<span>{{ april }}</span>
computed: {
april () {
if (!this.my_dates || !this.my_dates['2018-04-23'])
return null;
return this.my_dates['2018-04-23']['april'];
}
}
Fix using a method
{{ getMyDate('2018-04-23', 'april') }}
methods: {
getMyDate (date, month) {
if (!this.my_dates || !this.my_dates[date])
return null;
return this.my_dates[date][month];
}
}
There are other approaches like optional-chaining purpose or idx.
https://github.com/tc39/proposal-optional-chaining
https://github.com/facebookincubator/idx
It is because, may be you are getting the data from an async source(fetching from API or something). Unless that data is available vue would try to find my_dates['2018-04-23'] which will be undefined so you are getting that error.
Wait until you have fetched you data and then display it.
You can use v-if for that:
<div v-if="my_dates">{{my_dates['2018-04-23']['april']}}</div>
You might still get that error, even after using v-if, so try using computed for getting the values after that.
I hope it helps.
Related
I'm new to vue/promise and I am struggling to understand why when I try to display the result of a promise I end up with the expected data but when I try to find out its length, it says undefined
When I try to display the alerts from displayAlerts() , I can see a list of alerts, 2 in total. However in computed within the title function ${this.displayAlerts.length} appears as undefined, I was expecting to see 2.
Does it have something to do with displayAlerts() resulting in a promise? How do I fix the code such that I get 2 instead of undefined?
The code is below:
<template>
<div>
{{displayAlerts}}
<li v-for="alert in alerts" class="alert">
{{alert['name']}}
</li>
</div>
</template>
export default {
data () {
return {
alerts: null,
alert: new Alert(),
updatedAlert: new Alert(),
deletedAlert: new Alert(),
};
},
computed: {
...mapGetters("authentication",['token']),
...mapGetters("user",['profile']),
displayAlerts() {
return getUserAlert({
user_id: this.profile.user_id,
token: this.token
}).then(response => (this.alerts = response.data)).catch(
error => console.log(error)
)
},
title () {
return `My Alerts (${this.displayAlerts.length})`
},
test2() {
return [1,2,3]
},
}
};
</script>
Something like this should work:
<template>
<div v-if="alerts">
<h4>{{ title }}</h4>
<li v-for="alert in alerts" class="alert">
{{ alert.name }}
</li>
</div>
</template>
export default {
data () {
return {
alerts: null
}
},
computed: {
...mapGetters('authentication', ['token']),
...mapGetters('user', ['profile']),
title () {
// Handle the null case
const alerts = this.alerts || []
return `My Alerts (${alerts.length})`
}
},
methods: {
// This needs to be in the methods, not a computed property
displayAlerts () {
return getUserAlert({
user_id: this.profile.user_id,
token: this.token
}).then(response => (this.alerts = response.data)).catch(
error => console.log(error)
)
}
},
// Initiate loading in a hook, not via the template
created () {
this.displayAlerts()
}
}
</script>
Notes:
Computed properties shouldn't have side-effects. Anything asynchronous falls into that category. I've moved displayAlerts to a method instead.
Templates shouldn't have side-effects. The call to load the data should be in a hook such as created or mounted instead.
title needs to access this.alerts rather than trying to manipulate the promise.
While the data is loading the value of alerts will be null. You need to handle that in some way. I've included a v-if in the template and some extra handling in title. You may choose to handle it differently.
I've added title to the template but that's just for demonstration purposes. You can, of course, do whatever you want with it.
I've assumed that your original displayAlerts function was working correctly and successfully populates alerts. You may want to rename it to something more appropriate, like loadAlerts.
I have a error at my vue project.I use computed to return a object.
computed: {
getOpLog() {
if (this.product_menu) {
this.product_menu.forEach(opLogItem => {
if(opLogItem.id === 'menu_item_oplog') {
return opLogItem;
}
});
}
}
},
and my debugger shows that I have the right return object.
But when i run it in brower, it just not work.
[Vue warn]: Error in render: "TypeError: Cannot read property 'hidden' of undefined"
Here is my html.
<el-menu-item v-if="getOpLog.hidden" :id="getOpLog.id">
...
</el-menu-item>
But when I use this
getOpLog() {
if (this.product_menu) {
return this.product_menu[8]
}
}
It work.I want to know how can i fix this.Thx
When your if condition inside the getter is false i.e. if (this.product_menu), then getter will return undefined object. And thus, Vue.js complains.
As a simple remedy, add an extra check in v-if like:
<el-menu-item v-if="getOpLog && getOpLog.hidden" :id="getOpLog.id">
...
</el-menu-item>
Further, using return inside the forEach function of an array doesn't really cause a return from actual getter function. It is just returning from the inner arrow function. You will need to modify your code using Array.prototype.find method:
computed: {
getOpLog() {
if (this.product_menu) {
const item = this.product_menu.find(opLogItem => {
return opLogItem.id === 'menu_item_oplog';
});
return item;
}
}
};
But, you still should have v-if check for getOpLog in case find method returns undefined value.
I am not sure why I get a Vue warning when accessing nested object.
{{ user.area.name }}
[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
TypeError: Cannot read property 'name' of undefined
Just accessing the object has no warning.
{{ user.name }}
Any advice?
Totally guessing here but lets see if I'm right...
Say you've got something like this in your component / Vue instance data initialiser...
data () {
return {
user: {}
}
}
and you then populate that object asynchronously, eg
mounted () {
setTimeout(() => { // setTimeout is just an example
this.user = {
...this.user,
area: {
name: 'foo'
}
}
}, 1000)
}
If your template has
{{ user.area.name }}
when it initially renders before the asynchronous task has completed, you will be attempting to access the name property of area which is undefined.
Example ~ http://jsfiddle.net/tL1xbmoj/
Your options are...
Initialise your data with a structure that won't cause errors
data () {
return {
user: {
area: {
name: null
}
}
}
}
Example ~ http://jsfiddle.net/tL1xbmoj/1/
Use conditional rendering to prevent the error
<span v-if="user.area">{{ user.area.name }}</span>
Example ~ http://jsfiddle.net/tL1xbmoj/2/
Your user doesn't contain an area, so when you try to read that, it's undefined. You're not allowed to use the . operator on things that are undefined, so when you do .name on that, you get the error that you got.
You could also use a ternary operator {{ user.area ? user.area.name : "" }}
I need to create a checkbox that will be checked/unchecked depending on the value of a parameter coming from the database.
I'm not able to load that value when I'm rendering the page, so the idea is: render the page, "tell" the checkbox to "ask" the server what is the current value of the parameter and then check/uncheck the checkbox depending on the response. Then, if the user checks/unchecks the checkbox, make a new Ajax request to update the value in the database.
I wrote some code (I'm new in Vuejs, so for sure I'm doing something wrong):
var vm = new Vue({
el: '#root',
computed: {
checked() {
return this.initialize()
},
value() {
return this.checked
}
},
watch: {
checked() {
alert('watcher')
this.update();
}
},
methods: {
initialize(){
// Just pretending an initial value
var randomBoolean = Math.random() >= 0.5;
alert('Ajax request here to initialize it as ' + (randomBoolean ? 'checked' : 'unchecked'));
return randomBoolean;
},
update(){
alert('ajax request here to set it to ' + this.value)
}
}
});
You can check and run the code here: https://jsfiddle.net/hyn9Lcv2/
Basically it works to initialize the checkbox, but then it fails to update. If you check the console, there is this error:
[Vue warn]: Computed property "checked" was assigned to but it has no setter.
First have you thought of using the created() hook from the vue instance instead of watcher?
It's recommended and will execute the code as soon as the component is created.
From the doc:
new Vue({
data: {
a: 1
},
created: function () {
//Ajax call:
//onsuccess(response){
this.a = reponse.data.a
}
}
})
in the created hook you can do your ajax call, (axios is good library for that, worth checking it out: https://github.com/axios/axios ).
Then from your ajax response you can link the desired value to your checkbox by assigning it to a variable in the data object of the instance (in our case 'a')
Then bind it to your checkbox with the v-model like this:
<input
type="checkbox"
v-model="a">
I recommend to check the vue doc for more info on biding: https://v2.vuejs.org/v2/guide/forms.html#Checkbox-1
Hope it helps.
Just add bind click event
<div id="root">
<input id="check" type="checkbox" name="active" v-model="checked" #click="update">
<label for="check">Click me</label>
</div>
You need to fetch the database value when the component is created or mounted.
You then need to bind your checkbox with the initialized data.
Finally you need to watch the data to send an update to the database.
var vm = new Vue({
el: '#root',
data: {
//Your data
checked: null
},
// Function where you are going to fetch your data
mounted: function () {
console.log("Ajax call to initialize");
this.checked = Math.random() >= 0.5;
},
watch: {
// Watcher to save your data in the database
checked: function(newValue, oldValue){
if (oldValue === null) { return; } // to not make an useless update when data has been fetched
console.log("Ajax call to update value " + newValue);
}
}
});
<div id="root">
<input id="check" type="checkbox" name="active" v-model="checked" :disabled="checked === null">
<label for="check">Click me</label>
</div>
To fetch your data you can use for example Axios that works great with Vue.
To know more about life cycle of a component (to know if you should do the fetching at created or mounted) : https://v2.vuejs.org/v2/guide/instance.html
I'm not sure if I'm doing this right or wrong, but all the answers I seem to find how to update the dom for computed values...
I have this component:
Vue.component('bpmn-groups', {
props: ['groups', 'searchQuery'],
template: '#bpmn-groups',
computed: {
filteredGroups: function () {
var self = this;
return this.groups.filter(function(group) {
self.searchQuery = self.searchQuery || '';
return _.includes( group.name.toLowerCase(), self.searchQuery.toLowerCase() );
});
}
},
methods: {
clearFilter: function () {
this.searchQuery = '';
},
deleteGroup: function(group) {
Vue.http.delete('api/groups/'+group.id ).then(response => { // success callback
var index = this.groups.indexOf(group); // remove the deleted group
this.groups.splice(index, 1);
this.$forceUpdate(); // force update of the filtered list?
toastr.success('Schemų grupė <em>'+group.name+'</em> sėkmingai pašalinta.');
}, response => { // error callback
processErrors(response);
});
this.$forceUpdate();
},
},
});
And in the template I just have a simple v-for to go through filteredGroups:
<input v-model="searchQuery" type="text" placeholder="Search..." value="">
<div v-for="group in filteredGroups" class="item">...</div>
The deletion works fine, it removes it from groups property, however the filteredGroups value still has the full group, until I actually perform a search or somehow trigger something else...
How can I fix it so that the filteredGroup is updated once the group is updated?
Don't mutate a prop - they are not like data defined attributes. See this for more information:
https://v2.vuejs.org/v2/guide/components.html#One-Way-Data-Flow
Instead, as recommended in the link, declare a local data attribute that is initialized from the prop and mutate that.