In my Vue component, I have a computed property which watches the state and the component, and returns an object.
currentOrganization () {
if (this.$store.state.organizations && this.selectedOrganization) {
return this.$store.state.organizations.filter(org => org.id === this.selectedOrganization)[0];
}
}
Unfortunately, this property does not update automatically when the component loads, though I can see that I have both this.$store.state.organizations and this.selectedOrganization. It does, however, update when I dispatch an action to my Vuex store via the select component below:
<b-form-select id="orgSelect"
v-model="selectedOrganization"
:options="this.$store.state.organizations.map(org => {return {value: org.id, text:org.name}})"
size="sm"
v-on:input="currentOrganizationChange()"
class="w-75 mb-3">
<template slot="first">
<option :value="null" disabled>Change Organization</option>
</template>
</b-form-select>
The component dispatches a Vuex action:
currentOrganizationChange () {
this.$store.dispatch('setCurrentOrganization', this.selectedOrganization);
},
How can I make currentOrganization() compute initially?
The computed will not calculate until you use it.
console.log it, or just write current organization; somewhere in code which executes and it will calculate :)
You should ensure that your computed always returns a value. A linter would have warned you of that error. Chances are your condition is failing -- perhaps this.selectedOrganization is falsy.
Related
I am trying to pass a variable from a Parent (page) component to a Child (modal) component. After reading a few examples, this works fine. The variable in question is brought in from another component as a route param. If i refresh the page, the variable is lost and can no longer be passed to the child. My question is, is the best way to persist this using the store, or is it possible to persist another way if the user refreshed? Any help would be appreciated
Parent
<b-container>
<Modal v-show="displayModal" #close="closeModal">
<template v-slot:body>
<ExpressionCreate v-show="displayModal" :lender-id="lenderId" #close="closeModal"/>
</template>
</Modal>
<div class="card" style="width: 100%;">
<div class="card-header">
<h5>{{this.lenderName}}</h5>
<b-alert :show="this.loading" variant="info">Loading...</b-alert>
</div>
<b-btn block variant="success" #click="showCreateLenderModal">Add Expression</b-btn>
....
created () {
this.lenderId = this.$route.params.lenderId
...
navigate () {
router.go(-1)
},
showCreateLenderModal () {
this.displayModal = true
},
toggleDisplayModal (isShow) {
this.displayModal = isShow
},
async closeModal () {
this.displayModal = false
}
Child
<label>lender id:</label>{{this.lenderId}}
...
props: {
lenderId: {
type: Number
}
},
You can use VueSession to persist.
Simply persist your lender_id with
this.$session.set('lender_id', this.lender_id)
and you can get it later as
saved_lender = this.$session.get('lender_id')
if (saved_lender) {
// handle saved case here
}
You can use query params in URI by doing:
$route.push('/', { query: { param: 3123 } })
This will generate the URL /?param=3123 and this will work after refresh. Or, you can use vuex and vuex-localstorage plugin, that let you persist data in the browser, and you can close the browser and open again and data will be restored.
In order for the state of application to persist, I recommend that you use vuex to manage the state and use a library that abstracts the persisting to vue in a clean way. One popular library is vuex-persist. https://www.npmjs.com/package/vuex-persist
If you dont want to use a store, VueSession, a package linked here should do the trick
I built a vue component that get's a number value via prop from the outside laravel blade, like this:
<my-custom-template :mynumber="{{$numbervalue}}" :list:{{$alist}}></my-custom-template>
inside the template I have a v-for list and the prop:
props:{
list:Array,
mynumber: Number,
[..]
}
and
<template>
<ul>
<li v-for="item in list">{{item}}<span v-if="item.id == mynumber">active</span></li>
</ul>
</template>
Whenever the ID of the item is the same as the value mynumber, I want the "active" tag/span to be displayed.
Now in this template I also have a method that sends an axios request and on success it alters the value of the prop "mynumber", so the list should rerender:
axios.post('/api/someurl', this.obj)
.then(res => {
this.mynumber= res.data[something]; // returns a new number from the db.
})
.catch(error => { [..]
};
Issue: If I use this.mynumber in the list's v-if condition, the "active" tag is never being shown. If I use directly == mynumber then it works, but I cannot alter it with the axios response.
How should I approach this correctly?
How can I alter the initial prop, with the new value from the axios call?
First, you shouldn't be modifying props directly, as mentioned in this prior Stack Overflow post.
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "propRoomSelected"
Second, as seen in the Vue documentation for conditionals, you do not use this within templates, the this is inferred.
Now, to get to the meat of your question, how to look at either a prop or a new value when rendering. Here's how I'd do it.
<template>
<ul>
<li v-for="item in list">{{item}}<span v-if="isCurrent(item.id)">active</span></li>
</ul>
</template>
<script>
export default {
props: ['list', 'myNumber'],
data() {
return {
myNewNumber: undefined
}
},
methods: {
isCurrent(itemId) {
return itemId == (myNewNumber || myNumber)
}
}
}
</script>
Edit:
Note that there is a difference between
return itemId == (myNewNumber || myNumber)
and
return (itemId == myNewNumber) || (itemId == myNumber)
The first one "short circuits" a comparison against myNumber once myNewNumber becomes anything "truthy". Read more here.
Don't mutate props directly. Use this.$emit (Docs: https://v2.vuejs.org/v2/guide/components-custom-events.html) instead to change the myNumber in the parent. myNumber will then automatically update in the child component.
If I’m on a page with the URL 'http://localhost:8080/item' and I’m clicking on the same link on this page, then the page does not reload.
I need to make that if I click on the same link, the page will reload.
My link:
<nuxt-link :to="/item">
Any insight will be welcome. Thanks!
Use key, something like:
<router-view :key="$route.params.yourCustomParam"/>
Also you can use something like:
<router-link :to="{ params: { yourCustomParam: Data.now } }" replace>link</router-link>
Remember to is passed router.push() and it accept an object also. Doing that, it is more declarative and controllable. I'm using this to decide if the page of component should be rerendered since they will based on id params obtained from URL entry, and my child component can still using nesting .
I recently tried to solve a similar issue and to overcome this I used Vuex with :key (ref).
Firstly, in your store you need a state property such as:
export const state = () => ({
componentUpdates: {
item: 0,
//can add more as needed
}
})
In general, you could use only one property across the app if you prefer it that way. Just remember that later on, the key value needs to be unique - that is in the case if you used this property for two or more components within one page, for example. In this case, you could do something like this :key="$store.getters.getComponentUpdates.item+'uniqueString'"
then a getter:
export const getters = {
getComponentUpdates(state) {
return state.updateComponent;
}
}
finally a mutatation:
export const mutations = {
updateComponent(state, payload) {
return state.componentUpdates[payload.update]++
}
}
Now we can utilise the reactive :key wherever needed.
But first in your nuxt-link lets add an event to trigger the mutation, note the usage of #click.native to trigger the click event:
<nuxt-link #click.native="$store.commit('updateComponent', { update: 'item'})" :to="/item">
Now in the item page, for example. Let's imagine there is a component that needs to be updated. In this case we would add :key to it:
<my-item :key="$store.getters.getComponentUpdates.item" />
That is it. As you can see this solution utilises the benefits of nuxt-link but also allows us to selectively update only parts of our page that need updates (we could update the entire page this way as well if needed).
In case if you needed to trigger the logic from mounted or initial load in general, then you could use computed property and :key to your div container, right inside the <template> of your page.
Add :key to the div:
<template>
<div :key="$store.getters.getComponentUpdates.item"></div>
</template>
Create computed property:
computed: {
updateItemPage() {
//run your initial instructions here as if you were doing it in mounted then return the getter
this.initialLoadMethod()
return this.$store.getters.getComponentUpdates.item
}
}
The final touch, which is not crucial but can be implemented in order to reset the state property:
export const mutations = {
updateComponent(state, payload) {
return state.componentUpdates[payload.update] >= 10
? state.componentUpdates[payload.update] = 0
: state.componentUpdates[payload.update]++
}
}
There are a good examples of integrating vue with select2.
I have a question.
If we look at this part of the code:
mounted: function () {
var vm = this
$(this.$el)
// init select2
.select2({ data: this.options })
.val(this.value)
.trigger('change')
// emit event on change.
.on('change', function () {
vm.$emit('input', this.value)
})
}
I don't understand, why when we change value of select2, this.value changes too.
I expected a record like:
.on('change', function () {
this.value = $(this.$el).val()
vm.$emit('input', this.value)
})
It behaves that way because of how v-model works. What you are a looking at is a 2-way binding. Where if the value of selected in v-model="selected" changes, the value will be pushed down to the component.
When vm.$emit('input', this.value) is called, it tells the parent to update whatever variable is listening to changes, in this case selected, which it turn gets pushed back to the component such that its value gets changed.
To make it simpler to understand, this is the sequence of events:
select2's value changes
the select2 value change triggers an event emission
the parent receives the event and updates selected
the component's value gets assigned to the new value of selected
the watcher for the value gets triggered and updates select2 with the new value
Good question though.
Caveat: Doing this is understandably poor practice. It will break it sad ways when used with 1-way bindings.
After writing my previous answer, I realized I missed something important: contexts.
On line 5 in the jsfiddle, there is this line:
var vm = this, why?
This is because later on, when doing vm.$emit, this.$emit will not work; the context has been changed.
.on('change', function () {
//this = select2 element
vm.value // == 1
this.value // == 2
vm.$emit("input", this.value);
})
The value on the emit event is not that of the component, but of the select2 element.
While the value has not yet been changed on the component, the new value has been broadcasted to the parent.
Notice how select2 component used in the template:
<select2 :options="options" v-model="selected">
<option disabled value="0">Select one</option>
</select2>
In Vue.js using v-model with components could be simplified to:
<your-component
:value="selected"
#input="value => { selected = value }">
</your-component>
So every time you emit an event from your component the value gets changed at the parent component.
Source
Im coming from a React background and it's simply enough to set your state from a prop and you could call setState({...}) to update the state, so, with vue / vuex, I find it difficult.
To simplify:
Vuex State
name: "Foo bar"
Vuex Action
addName
I can change the state no problem but I need to bind an input field and when change, the state is updated. Think of this as an update form where the user details are already pre-filled and they can change their name.
<input #change="addName(newName) v-model="newName" />
I could add a watch to watch for newName and update the state but, I need to pre-fill the input with the state. Ha! I could use beforeMount() but my state is not loaded as yet.
computed: {
...mapState([
'name'
]),
},
beforeMount() {
// this.newName = this.name
console.log('Mounted') // Shows in console
console.log(this.name) // nothing
}
Name shows in templete <pre>{{ name }}</pre>
Yo can use a computed setter
computed:{
name:{
get: function(){
return store.state.name;
},
set: function(newName){
store.dispatch('addName',newName);
}
}
}
enter code here
And set the v-model to the computed property name in your <input> tag :
<input v-model="name" />
Here is the working jsfiddle