I'd like to access a computed property in a props validator:
validator({ type, size }) {
return type === 'disabled' && hasLink()
}
and further down:
computed: {
hasLink() {
return this.link // another props accessed here
}
},
But hasLink is undefined in the props validator. Any idea how I can access this in the props validator.
You can't. Prop Validation:
Note that props are validated before a component instance is created, so instance properties (e.g. data, computed, etc) will not be available inside default or validator functions.
Related
I defined a vuex getter function with parameter like this:
const getters = {
getProjectById: (state) => (id) => {
return state.projects.find(project => project.id === id)
}
}
Now, i want to use this getter in my component, but i couldn't find a way to pass the parameter to the getter.
Here is my getter hook computed property:
computed: {
...mapGetters(["currentUserPhoto","getProjectById"])
},
Is it possible to pass Id parameter which is come from router, to "getProjectId" getter? If is possible, what is the best way to do it?
Add another computed property called projectById which takes the route param as parameter and returns the project :
computed: {
...mapGetters(["currentUserPhoto","getProjectById"]),
projectById(){
return this.getProjectById(this.$route.params.id)
}
},
I'm having trouble understanding how the code from a tutorial works.
I have the EventComponent component, which displays information about the event.
It uses a computed property which accesses Vuex store.
<h4>This event is {{ getEvent(1) }}.</h4>
export default {
computed: {
getEvent() {
return this.$store.getters.getEventById
}
}}
And this is my Vuex index.js file:
export default createStore({
state: {
events: [{id: 1, title: "Last day"}]
},
mutations: {},
getters: {
getEventById: state => id => {
return state.events.find(event => event.id === id)
}
},
actions: {},
modules: {}
})
The event info is displayed correctly. However, I'm confused by
How the computed property is able to accept an argument
How that argument is passed to the store getter, when the getter is not explicitly called with that argument
Could you help me understand this?
How the computed property is able to accept an argument
Since getEvent just returns this.$store.getters.getEventById (which is a getter for a function), getEvent also returns a function, and can therefore be called the exact same way.
How that argument is passed to the store getter, when the getter is not explicitly called with that argument
Actually, the getter is indeed being called with that argument. As mentioned above getEvent is effectively an alias for this.$store.getters.getEventById, so getEvent(1) is the same as this.$store.getters.getEventById(1).
Return a function from the computed property that takes the id as parameter:
<h4>This event is {{ getEvent(1) }}.</h4>
export default {
computed: {
getEvent() {
return (id)=>this.$store.getters.getEventById(id)
}
}}
I want to traslate the text, i have this code:
title: {
type: String,
default: function () {
return this.$t("basic.confirm")
}
},
i am getting this error:
vue.common.dev.js?4650:630 [Vue warn]: Error in nextTick: "TypeError: Cannot read property '$t' of undefined"
But when i used in the template, worked fine:
{{$t("basic.confirm")}}
Props are validated before the component instance is created. Therefore "this" keyword is not available at the moment you're attempting to use it, since "this" does not exist yet.
What you can do though is create a computed variable which actually translates the prop and then use it in your template or wherever you want to. Here's the pseudocode:
computed: {
computedTitle: function () {
// Prop fallback value.
if (!this.title) {
return this.$t('basic.confirm');
}
// Actual prop value.
return this.title;
}
}
I'm trying to get a value from a VueX store during render at the render of my component. What I see is that i firstly get the error above, and then, the value is correctly updated on the component because I think that the state is well reactive but not initialized when component is rendered.
How can i avoid this error ?
template:
<span class="kt-widget17__desc">
{{ carsNumber }}
</span>
script:
export default {
data() {
return {
carsNumber: this.currentGarage.numberOfTags
};
},
computed: {
...mapGetters(["currentGarage"]),
}
};
Error:
Property or method "carsNumber" is not defined on the instance but
referenced during render. Make sure that this property is reactive..
What I did is I created a setter and getter in computed property, in your case carsNumber instead of putting it inside the data property.
computed: {
...mapGetters(["currentGarage"]),
carsNumber: {
get(){
return this.currentGarage.numberOfTags
},
set(newVal){ // setter can be excluded if not used
// you can call this.$store.commit('yourMutation', yourValue)
}
}
}
I started Vue.js two days ago and I already need your help.
I have a state machine component which renders a child component passed as parameter. Because I do not know in advance which component I am going to display and the props it takes, I am using render functions instead of templates for the state machine parent component.
Code excerpt goes like this :
function render(h) {
const app = this;
props.reduce((acc, key) => ((acc[key] = app[key]), acc), currentPropsObj);
console.log("child props", currentPropsObj);
return app.hasStarted
? h(
renderComponent,
{
// copy the props from the machine vue component to the render component
props: Object.assign({}, currentPropsObj)
},
[]
)
: h("div", {}, "LoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLo");
}
return Vue.component(name, {
render,
data: function() {
return initialData;
},
methods: {
set: function(stateObj) {
Object.keys(stateObj).forEach(key => (this[key] = stateObj[key]));
}
},
The issue is that the dynamic renderComponent does not seem to take into account the props it (should) receives as parameter. I checked that currentPropsObj is correctly computed. Using Vue devtool, I also checked that the Search child component (the one I am using in the demo) props are not udpated when its parent data is updated.
For a full demo and reproduction, I made a codesandbox : https://codesandbox.io/s/m5jzqw9w3y
What can I be doing wrong?