New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.
Already on GitHub?
Sign in
to your account
Comments
Version
2.6.11
Reproduction link
Steps to reproduce
Computed property on a child component returns error when passing a value as props from parent.
Here’s a screenshot on devtools
What is expected?
the computed property must evaluate if the prop value is present
What is actually happening?
the computed property that requires the prop value evaluate even it is not defined yet
Arrow functions change the value of the context, you need to write this instead:
computed: { name() { return this.artGroup.name }
Please, next time consider using the forum, the Discord server or StackOverflow for questions first. But feel free to come back and open an issue if it turns out to be a bug 🙂
2 participants
I have an issue where a computed property only sometimes works. Sometimes it has the value/error templateComponent:"(error during evaluation)"
What could be causing this issue? If someone can point me in the correct direction I can investigate further but I dont know where to start.
The problem computed property:
// Error in the below computed property
templateComponent() {
let template = 'default' // assign default template
if (!_.isNull(this.wp.template) && this.wp.template.length)
template = this.wp.template.replace('.php','').toLowerCase()
return template
}
Page.vue
<template>
<div v-if="wp">
<component :is="templateComponent" v-bind:wp="wp"></component>
</div>
<p v-else>Loading...</p>
</template>
<script type="text/javascript">
import { mapGetters } from 'vuex'
import * as Templates from './templates'
// Map template components
let templateCmps = {}
_.each(Templates, cmp => {
templateCmps[cmp.name] = cmp
})
export default {
props: ["slug"],
components: {
...templateCmps
// Example of templateCmps is below
// 'default': Templates.Default,
// 'agency': Templates.Agency,
// 'home': Templates.Home,
},
computed: {
...mapGetters(['pageBySlug']),
wp() {
return this.pageBySlug(this.slug);
},
// Error in the below computed property
templateComponent() {
let template = 'default' // assign default template
if (!_.isNull(this.wp.template) && this.wp.template.length)
template = this.wp.template.replace('.php','').toLowerCase()
return template
}
},
created() {
// Get page title, content, etc. via rest request
this.$store.dispatch('getPageBySlug', { slug: this.slug })
}
}
</script>
I have an issue where a computed property only sometimes works. Sometimes it has the value/error templateComponent:"(error during evaluation)"
What could be causing this issue? If someone can point me in the correct direction I can investigate further but I dont know where to start.
The problem computed property:
// Error in the below computed property
templateComponent() {
let template = 'default' // assign default template
if (!_.isNull(this.wp.template) && this.wp.template.length)
template = this.wp.template.replace('.php','').toLowerCase()
return template
}
Page.vue
<template>
<div v-if="wp">
<component :is="templateComponent" v-bind:wp="wp"></component>
</div>
<p v-else>Loading...</p>
</template>
<script type="text/javascript">
import { mapGetters } from 'vuex'
import * as Templates from './templates'
// Map template components
let templateCmps = {}
_.each(Templates, cmp => {
templateCmps[cmp.name] = cmp
})
export default {
props: ["slug"],
components: {
...templateCmps
// Example of templateCmps is below
// 'default': Templates.Default,
// 'agency': Templates.Agency,
// 'home': Templates.Home,
},
computed: {
...mapGetters(['pageBySlug']),
wp() {
return this.pageBySlug(this.slug);
},
// Error in the below computed property
templateComponent() {
let template = 'default' // assign default template
if (!_.isNull(this.wp.template) && this.wp.template.length)
template = this.wp.template.replace('.php','').toLowerCase()
return template
}
},
created() {
// Get page title, content, etc. via rest request
this.$store.dispatch('getPageBySlug', { slug: this.slug })
}
}
</script>
In the Vue-CLI built, the COMPUTED computing property is used in the app project.
Computed Calculation Attributes reports in the Vue DevTools plugin in the Chrome plugin
The pull-down column of the computed property should be displayed.
Correctly displayed, here the COMPUTED is displayed correctly in the lower right corner, and the reason for the help! ! !
<template>
<div class="icons">
<swiper>
<swiper-slide>
<div class="icon" v-for="item of iconList" :key="item.id">
<div class="icon-img">
<img class="icon-img-content" :src="item.imgUrl">
</div>
<p class="icon-desc">{{ item.desc }}</p>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
export default {
name: 'HomeIcons',
data() {
return {
iconList: [{
id: '0001',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/piao.png',
desc: 'Attractions Tickets'
},
{
id: '0002',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/hotel.png',
desc: 'Wine list'
},
{
id: '0003',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/flight.png',
desc: 'Air tickets'
},
{
id: '0004',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/package.png',
desc: 'Holiday'
},
{
id: '0005',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/train.png',
desc: 'Train Vote'
},
{
id: '0006',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/innBnb.png',
desc: 'Best Inn'
},
{
id: '0007',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/bargainflight.png',
desc: 'Low-priced ticket'
},
{
id: '0008',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/group.png',
desc: 'Special Hotel'
},
{
id: '0009',
imgUrl: '//s.qunarzz.com/homenode/images/touchheader/haiwai.png',
desc: 'Overseas Hotel'
}]
}
},
computed: {
pages () {
const pages = []
this.iconList.forEach((item, index) => {
const page = Math.floor(index / 8)
if(!pages[page]) {
this.pages = []
}
pages[page].push(item)
})
return pages
}
}
}
</script>
<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.icons >>> .swiper-container
height 0
padding-bottom 50%
.icon
position relative
overflow hidden
float left
width 25%
height 0
padding-bottom 25%
.icon-img
position absolute
left 0
right 0
top 0
bottom .44rem
box-sizing border-box
padding .1rem
.icon-img-content
height 100%
display block
margin 0 auto
.icon-desc
position absolute
left 0
right 0
bottom 0
height .44rem
line-height .44rem
text-align center
color $darkTextColor
</style>
Hi respected community
trying to screw store for vue
and I can’t understand what the problem is
I can’t get the state out of the store directly, neither through getters
constantly in the vue debugger I see this picture error during evaluation
with this in the vuex debugger everything is OK
store code (without modules)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
strict: true,
state: {
rootstate: 'storeJs'
},
getters: {
getRootState: function (state) {
return state.rootstate
}
},
mutations: {},
actions: {}
});
export default {
store
}computed: {
...mapGetters([
'CARCLASS_PRICES',
'getRootState'
]),
count() {
return this.$store.state.getRootState;
}
},something I can’t understand at all
the entire store can be output to the console
but if I try to get through to the getter, it says that no such property was found
methods: {
testStore: function (e) {
console.log(this.$store.getters.getRootState);
// return store;
}
},Cannot read property ‘getRootState’ of undefined