Let me explain what I mean by "constant" because I'm unsure of the correct terminology.
.state(pressed) {
// Do something inside my mixin with "pressed"
}
In the example above, "pressed" is the constant - it's not a variable and cannot change.
The question is can I reference a pointer to this keyword inside the mixin?
.state(pressed) {
.call-another-mixin(// use "pressed" without explicitly typing it //);
}
Related
I'm trying to create a simple component whose focus is to display an element in an array, but I'm having issues with Vue's philosophy.
As you may know, if a mutation on a prop is triggered, Vue goes crazy because it doesn't want you to update the value of a prop. You should probably use a store, or emit an event.
The issue is: that since I'm adding functionalities to my codebase (for instance the possibility to start again when I reach the last element of the array), it would be wrong to have an upper component be responsible for this management, as it would be wrong to ask an upper component to change their variable, given that my component is supposed to manage the array, so an emit would be a bad solution.
In the same way, given that I'm making a generic component that can be used multiple times on a page, it would be incorrect to bind it to a store.
EDIT: the reason why the prop needs to be updated is that the component is basically acting as a <select>
Am I missing an obvious way to set this up?
To give an example of my end goal, I'm aiming for a component looking like the one in the picture below, and I think a 2 way bind like in v-model would be more appropriate than having to set an #change just to say to update the value of the passed prop.
If you have a prop the correct way to update the value is with a sync, as in the following example
Parent:
<my-component :title.sync="myTitle"></my-component>
Child:
this.$emit("update:title", this.newValue)
Here is a very good article talking about the sync method.
By the other hand you can alter a Vuex state variable by calling a Vuex mutation when you change the value:
computed: {
title: {
// getter
get() {
return this.$store.state.title
},
// setter
set(newValue) {
this.setTitle(newValue) // Requires mutation import, see the methods section.
// Or without import:
this.$store.commit('setTitle', newValue);
}
}
},
methods: {
...mapMutations("global", ["setTitle"]) // It is important to import the mutation called in the computed section
}
In this StackOverflow question they talk about changing state from computed hook in Vue. I hope it works for you.
I am new in Vuejs & still not pretty clear about vue reactivity system. Here in the following code I am trying to update the initial value of a variable in data property using a method.
<script>
name: "OrderDetails",
data(){
tax:5,
subtotal:0
},
computed:{
calculateSubtotal:()=> {
let subtotal;
-----some code--------
this.subtotal = subtotal;
}
}
</script>
But still the subtotal remains 0. How can I Update the value ?
Here is the code snippet https://codesandbox.io/s/affectionate-borg-384rl?file=/src/App.vue
Thanks in advace.
There are a few errors in your code
You must not use fat arrow when declaring computed methods. this will not bind to your instance.
computed:{
calculateSubtotal() {
let subtotal;
-----some code--------
this.subtotal = subtotal;
}
}
Your computed methods should not have side effects. This means that you must compute values based on data or external information, but do not update data from within the method. You should return the value you want.
computed:{
calculateSubtotal() {
let subtotal;
-----some code--------
return subtotal;
}
}
If you never reference the computed method (call it) it will not execute. You're not calling calculateSubtotal anywhere and as such it is never run. You need to call it somewhere. In the template for instance.
{{{calculateSubtotal}}
Here's an example with proper this, returning a value and calling the computed method. But you shouldn't do this. This bring me to no 4.
You should just use the computed method as any other data, and not pass it as params to other methods. This will work in methods also.
This is a complete example
I've got a little problem with vuejs.
My state is basically something like this.
state: ()=>({
activeSide : "from",
}),
I want a component to be focused or blurred based on whether activeSide has the value activeSide set to "from" or not
my idea at the moment, doesn't seem to be very elegant, I basically created a computed property in my component,
focusSide(){
console.log("changed active side")
this.$store.state.activeSide
}
and then I set up a watch to see if that property changes.
watch:{
focusSide : function(newV,_){
console.log("changing focus")
newV=="from" ? this.$refs.fromArea.$el.focus() : this.$refs.fromArea.blur()
}
},
the problems here is that apart from the fact that the solution doesn't look elegant the watch doesn't work either, I've seen that focusSide is changing its value correctly (or at least the body of the method is executed), but the watcher is not executed, I have the feeling that since focusSide state is never used in my template, vuejs thinks that it's not necessary to react and change values, something like reactive frameworks where if the value is not observated then don't change (maybe I'm wrong)
what would be the ideal way for achieve this???
thank you
You need return value of computed properties focusSide, otherwise it will always return undefined
focusSide () {
console.log("changed active side")
return this.$store.state.activeSide
}
I have a custom-directive :myMethod="loadProfile(currentUser)" which loads the JSON when the component is loaded. I use mapGetters from Vuex but surprisingly, this method is also working very well..I have a dilemma if this is also correct or performance-wise compared to other approaches like calling methods in mounted or created hooks (which I also tried)? Which is better to call on the hook or custom-directive?
Here is my sample code:
<template v-if="currentUser.username === 'admin'">
... //
<template v-else>
<div :myMethod="loadProfile(currentUser)"></div>
</template>
Vuex Getters
computed: {
...mapGetters([
'currentUser',
])
}
Method
loadProfile(payload){
this.user.last_name = payload.last_name,
this.user.first_name = payload.first_name,
this.user.image = ( payload.image === 'no_avatar.png' ? '/image/no_avatar.png' : '/storage/images/'+ payload.image)
}
Don't use methods unless you really have to. In this case there seems to be little reason to call loadProfile without currentUser, so lets just move it to a computed property:
computed: {
...mapGetters([
'currentUser'
]),
actualUser () {
// Make a shallow copy
const user = { ...this.user };
if (this.currentUser) {
user.lastName = this.currentUser.lastName;
user.firstName = this.currentUser.firstName;
user.image = (this.currentUser.image === 'no_avatar.png' ? '/image/no_avatar.png' : `/storage/images/${this.currentUser.image}`);
}
return user;
}
}
Why use a computed property? Computed properties are calculated and updated whenever their dependencies update. When the dependencies stay constant, the computed property will just be loaded from cache. This is a better for performance and makes it so you don't have to worry about when to update your data yourself.
As for the use of a directive. I most cases you don't need to use directives. You don't send a function reference to the directive here, but rather the evaluated result of the method, so doing <div :myMethod="actualUser"></div> would work too. You may want to make sure that what you are doing cannot be done with actual components. Components are re-usable and much easier to read than the code in a custom directive.
Vue.js directives are only meant to do some low-level DOM manipulations that you cannot do with a regular component. So in short, you should not be doing what you are currently doing.
Now on to longer answer:
In your code, you are doing something like this: <div :myMethod="loadProfile(currentUser)"></div>. If :myMethod is a directive then it should be v-myMethod="" instead of :myMethod="". Latter syntax i.e. colon syntax refers to props and not directive. So, it means your code is not really executing directive. Just treating myMethod as some prop.
Second, doing :myMethod="loadProfile(currentUser)" doesn't mean you are doing anything within an actual directive code. It is still being called from the component template.
Third, if we look at your loadProfile() method implementation, then it is not a function that returns a value. It is simply a function modifying component instance using this. If all you need to do this, then you don't need a directive or prop.
Fourth, doing :myMethod="loadProfile(currentUser)" will work but it looks awkward definitely not readable. Instead, you should rely on a watcher or computed property. It is the idiomatic way of doing things in Vue.js. Example watcher implementation would look like:
watch: {
currentUser(newVal) {
this.user.last_name = newVal.last_name,
this.user.first_name = newVal.first_name,
this.user.image = ( newVal.image === 'no_avatar.png' ? '/image/no_avatar.png' : '/storage/images/'+ newVal.image)
}
}
As far as the performance is concerned, you should not worry about it. Performance penalty if any will be negligible.
Why nested fields of literal objects bound to a component’s property do not get reactive and observed?
Example:
<my-comp :my-prop="{ my: { literal: { object: { with: { nested: { field: ‘not reactive’ }}}}}}"></my-prop>
When you do this inside my-comp:
created() {
console.log(this); // you can see in the Chrome console that nested fields of this.myProp do not get reactive (i.e. no getters)
}
I know that I can play around it, but I am just asking why not?
Is there a neat way to make it reactive?
Thank you!
This is because the way "HTML" templates are rendered.
When Vue "compiles" your html, it basicly creates the following "computed" function
render(createElement) { /* `createElement` is also known as `h` in the Vue world */
return createElement('my-comp', {
props: {
myProp: { my: { literal: { object: { with: { nested: { field: ‘not reactive’ }}}}}},
},
);
},
Since the full flow of the value of myProp never passes through the data function, nor through the return result of a normal computed function, it never gets marked for reactivity.
While it might sound weird that Vue marks the return result of all "computed" functions, expect the special render function reactive, it actually makes sense if looking at the design idea of Vue, namely props in, and events out. This not marking of reactivity gives us a performance boost here, compared to marking it reactive.
If you still require it to be reactive (and thus want to go against the core principles of Vue (and thus making your application harder to understand) ), you can do it, by storing the value inside the data section of your component, or by returning it from a computed property.