I have a VueJS component which contains a button whose class and text are computed properties and changes every time the button is clicked. They are changing fine as long as I click on the button once it is loaded. I wanted to store the state in localStorage and if I reload the page set the text and class based on the value stored. The value of ordered is changing but the button text and class are not reflecting that in UI. Does anyone have any suggestion as to what I may be doing wrong? Following is the source
<template>
<div class="main-view">
<button type="button" :class="order_button_style" #click="on_order_button_click()">
{{ order_button_text }}
</button>
</div>
</template>
<script>
export default {
name: "FoodComponent",
props: {
item: Object
},
methods: {
on_order_button_click() {
this.item.ordered = !this.item.ordered;
localStorage.setItem(this.item.id, this.item.ordered);
}
},
mounted() {
var storedState = localStorage.getItem(this.item.id);
if (storedState) {
this.item.ordered = storedState;
}
},
computed: {
order_button_text() {
return this.item.ordered === true ? "Ordered" : "Order";
},
order_button_style() {
return this.item.ordered === true
? "button ordered-button"
: "button unordered-button";
}
}
};
</script>
What you will get from the local storage is a string. In mounted, ordered property will be a string instead of a boolean so you order_button_text computed property condition will never be true. To fix this you can just convert storedState property to a boolean :
mounted() {
const storedState = localStorage.getItem(this.item.id) === 'true';
if (storedState) {
this.item.ordered = storedState;
}
},
Related
I'm a beginner trying to get my app to pass props that set CSS styles down a chain to child components. I have a listener that checks for view port size, and as the window gets resized, it checks past a certain point and then swaps the css class and passes it down the chain..
I think I may be doing something incorrectly because my child components don't seem to be receiving the new styles and aren't updating in the DOM as I drag the window.
Here is my code.. I removed irrelevant code to make it easier to read:
Page_Listings.vue
<template>
<main>
<section>
<ListingRack
:prp_classes="rackClass"
/>
</section>
</main>
</template>
<script>
import ListingRack from './Listing__Rack.vue';
export default {
name: 'Front_Page__Panel',
data() {
return {
viewportWidth: window.innerWidth
}
},
methods: {},
mounted() { window.onresize = () => this.viewportWidth = window.innerWidth },
components: {ListingRack},
},
computed: {
rackClass: function(){
let theValue;
console.log('>> viewport width is now: ',this.viewportWidth)
if(this.viewportWidth > 1200) {
theValue = "grid_view";
console.log('>> grid view')
}
else {
theValue = 'card_view';
console.log('>> card view')
}
return theValue
}
}
}
</script>
Listing__Rack.vue
<template>
<div class="listing_rack" :class="classes">
<ul>
<li v-for="item in listings" :key="item.postId">
// I removed irrelevant code for hte sake of simplicity in this example.
// listings is a GraphQL returned array of data that generates a list of "listings".
<Listing
:prp_classes=classes
/>
</li>
</ul>
</div>
</template>
<script>
import Listing from './Listing.vue'
export default {
name: 'listing__rack',
data() {
return {
posts: [], // what we get from the database.
listings: [], // what we copy from the database.
classes: this.prp_classes
}
},
props: {
prp_classes: String
},
components: {
Listing
},
watch: {
classes: function(){
//just to check if we're receiving anything...
console.log(">> [Listing_Rack](watch)(classes) there was a change to classes!");
}
}
}
</script>
Listing.vue
<template>
<div :id=id
:class=classes
class="listing"
:style="backgroundStyle"
>
</div>
</template>
<script>
export default {
name: 'Listing',
data() {
return {
classes: this.prp_classes,
backgroundStyle: String
}
},
props: {
prp_classes: String
},
methods: {
checkClasses: function(){
if(this.classes === 'grid_view') this.backgroundStyle = 'background: center / cover no-repeat url(background.jpg);';
}
},
mounted: function() {
this.checkClasses();
},
watch: {
classes: function(){
this.checkClasses();
}
}
}
</script>
My console.logs on rackClass so I know the class swapping part is working, but all my subsequent child components don't seem to be updating accordingly..
Can someone tell me what I'm doing wrong? Is there a better way to do this? How come my props aren't being passed when I drag the window, and how can I dynamically set styles in the DOM?
Your code does not work because of the one big mistake (don't worry, many people do it)
You are passing your classes using props to child components. But instead of using this prop (prp_classes) directly in the child's template, you create an absolutely unnecessary classes property in the data()
Problem with that is that data() is executed only once when the component is created. If the value of the prp_classes prop changes later, classes property from the data() just holds the old value.
To fix this, remove unnecessary classes from the data and use the prop directly in the template...
...bit more explanation by example what is going on:
let prp_classes = 'card_view'
let classes = prp_classes
prp_classes = 'grid_view'
// prp_classes === 'grid_view', classes === 'card_view', prp_classes !== classes
// strings/numbers/Date ...all work the same
let o1 = { a: 1 }
let o2 = o1
o1.a = 2
// o1.a === 2, o2.a === 2, o1 === o2
More to study
On my app, I have multiple "upload" buttons and I want to display a spinner/loader for that specific button when a user clicks on it. After the upload is complete, I want to remove that spinner/loader.
I have the buttons nested within a component so on the file for the button, I'm receiving a prop from the parent and then storing that locally so the loader doesn't show up for all upload buttons. But when the value changes in the parent, the child is not getting the correct value of the prop.
App.vue:
<template>
<upload-button
:uploadComplete="uploadCompleteBoolean"
#startUpload="upload">
</upload-button>
</template>
<script>
data(){
return {
uploadCompleteBoolean: true
}
},
methods: {
upload(){
this.uploadCompleteBoolean = false
// do stuff to upload, then when finished,
this.uploadCompleteBoolean = true
}
</script>
Button.vue:
<template>
<button
#click="onClick">
<button>
</template>
<script>
props: {
uploadComplete: {
type: Boolean
}
data(){
return {
uploadingComplete: this.uploadComplete
}
},
methods: {
onClick(){
this.uploadingComplete = false
this.$emit('startUpload')
}
</script>
Fixed event name and prop name then it should work.
As Vue Guide: Custom EventName says, Vue recommend always use kebab-case for event names.
so you should use this.$emit('start-upload'), then in the template, uses <upload-button #start-upload="upload"> </upload-button>
As Vue Guide: Props says,
HTML attribute names are case-insensitive, so browsers will interpret
any uppercase characters as lowercase. That means when you’re using
in-DOM templates, camelCased prop names need to use their kebab-cased
(hyphen-delimited) equivalents
so change :uploadComplete="uploadCompleteBoolean" to :upload-complete="uploadCompleteBoolean"
Edit: Just noticed you mentioned data property=uploadingComplete.
It is easy fix, add one watch for props=uploadComplete.
Below is one simple demo:
Vue.config.productionTip = false
Vue.component('upload-button', {
template: `<div> <button #click="onClick">Upload for Data: {{uploadingComplete}} Props: {{uploadComplete}}</button>
</div>`,
props: {
uploadComplete: {
type: Boolean
}
},
data() {
return {
uploadingComplete: this.uploadComplete
}
},
watch: { // watch prop=uploadComplete, if change, sync to data property=uploadingComplete
uploadComplete: function (newVal) {
this.uploadingComplete = newVal
}
},
methods: {
onClick() {
this.uploadingComplete = false
this.$emit('start-upload')
}
}
})
new Vue({
el: '#app',
data() {
return {
uploadCompleteBoolean: true
}
},
methods: {
upload() {
this.uploadCompleteBoolean = false
// do stuff to upload, then when finished,
this.uploadCompleteBoolean = true
},
changeStatus() {
this.uploadCompleteBoolean = !this.uploadCompleteBoolean
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
<button #click="changeStatus()">Toggle Status {{uploadCompleteBoolean}}</button>
<p>Status: {{uploadCompleteBoolean}}</p>
<upload-button :upload-complete="uploadCompleteBoolean" #start-upload="upload">
</upload-button>
</div>
The UploadButton component shouldn't have uploadingComplete as local state (data); this just complicates the component since you're trying to mix the uploadComplete prop and uploadingComplete data.
The visibility of the spinner should be driven by the parent component through the prop, the button itself should not be responsible for controlling the visibility of the spinner through local state in response to clicks of the button.
Just do something like this:
Vue.component('upload-button', {
template: '#upload-button',
props: ['uploading'],
});
new Vue({
el: '#app',
data: {
uploading1: false,
uploading2: false,
},
methods: {
upload1() {
this.uploading1 = true;
setTimeout(() => this.uploading1 = false, Math.random() * 1000);
},
upload2() {
this.uploading2 = true;
setTimeout(() => this.uploading2 = false, Math.random() * 1000);
},
},
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<div id="app">
<upload-button :uploading="uploading1" #click="upload1">Upload 1</upload-button>
<upload-button :uploading="uploading2" #click="upload2">Upload 2</upload-button>
</div>
<template id="upload-button">
<button #click="$emit('click')">
<template v-if="uploading">Uploading...</template>
<slot v-else></slot>
</button>
</template>
Your question seems little bit ambiguë, You can use watch in that props object inside the child component like this:
watch:{
uploadComplete:{
handler(val){
//val gives you the updated value
}, deep:true
},
}
by adding deep to true it will watch for nested properties in that object, if one of properties changed you ll receive the new prop from val variable
for more information : https://v2.vuejs.org/v2/api/#vm-watch
if not what you wanted, i made a real quick example,
check it out hope this helps : https://jsfiddle.net/K_Younes/64d8mbs1/
In Vue.js i have a component (Answer Component) like this:
<template>
<a class="quiz-input-choice" :class="{'quiz-input-choice--selected': answer.selected}"
#click="toggleSelect()" :selected="answer.selected">
<img :src="answer.image_path"/>
<p class="quiz-input-choice__description">{{answer.title}}</p>
</a>
</template>
<script>
export default {
props: ['answer'],
methods: {
toggleSelect() {
this.$parent.$emit('answer-selected', this.answer.id);
}
}
}
</script>
If in the parent (Question Component) I update the "selected" attribute of the element, this component will not be rerendered.
export default {
props: ['question'],
components: {QuizAnswer},
created: function () {
let _self = this;
this.$on('answer-selected', id => {
let i = _self.question.answers.map(item => item.id).indexOf(id);
let answer = _self.question.answers[i];
answer.selected = !answer.selected;
});
}
}
In Vue Developer Console, i checked that Answer component data are updated, so the answer is marked as selected. Anyway, is not rendered with the "quiz-input-choice--selected" class.
If, strangely, I update from the parent other attribute of the prop (for example (answer.title), then the child component is rendered correctly with also the class "quiz-input-choice--selected".
So i guess it's a problem of detecting changes from the child.
Thank you everybody for the answers.
I discovered the problem. The "selected" attribute of the answer was not present in the initial object, so Vue cannot make reactive that attribute.
https://v2.vuejs.org/v2/guide/reactivity.html
I solved making reactive that property in the parent component.
created() {
let self = this;
this.question.answers.forEach(function (answer) {
self.$set(answer, 'selected', false);
});
},
I think you have a structural issue here. You shouldn't submit an event to your parent, since the component is supposed to be self-contained.
What you can do however is emitting an event in the child component (Answer) that will be catch in the parent (Question).
Answer.vue
<template>
<a class="quiz-input-choice" :class="{'quiz-input-choice--selected': answer.selected}"
#click="toggleSelect()" :selected="answer.selected">
<img :src="answer.image_path"/>
<p class="quiz-input-choice__description">{{answer.title}}</p>
</a>
</template>
<script>
export default {
props: ['answer'],
methods: {
toggleSelect() {
this.$emit('answer-selected');
}
}
}
</script>
Question.vue
Your template will have be catching the event like this (I don't know where your answers are so I assume that you have a answers array) :
<answer
v-for="(answer, index) in answers"
:answer="answer"
#answer-selected="answerSelected(index)"
></answer>
And your script will look like this :
export default {
props: ['question'],
components: {QuizAnswer},
data() {
return {
answers: [],
selectedAnswer: -1,
};
},
watch: {
selectedAnswer(newIndex, oldIndex) {
if (oldIndex > -1 && this.answers.length > oldIndex) {
// Reset old value
this.answers[oldIndex].selected = false;
}
if (newIndex > -1 && this.answers.length > newIndex) {
// Set new value
this.answers[newIndex].selected = true;
}
},
},
methods: {
answerSelected(index) {
this.selectedAnswer = index;
},
},
};
Scenario
I have a generic modal component, where i use a global bus (empty VUE instance), to communicate with the modal component from whichever other component that's using it..
Issue
in the Mounted() or Created() hook for the Modal.VUE component, i'm trying to overwrite the default initialized value i need to figure out which content is to be displayed in the modal.
console.log("Selected action is : " + actionName)
... prompts out the correct actionName, so the bus functionality is there..
But when setting the variable like this :
this.modalComponent == actionName
.. and using it like this :
<h2 v-if="modalComponent == 'refund'">Refundér</h2>
<h2 v-if="modalComponent == 'empty'">Not defined</h2>
.. the modalComponent value is always empty (as initialized)
Script code :
<script>
import bus from '../global/bus.js'
export default {
name: "modal",
data(){
return {
modalComponent: "empty"
}
},
mounted() {
bus.$on('on-action', function (actionName) {
console.log("Selected action is : " + actionName)
this.modalComponent == actionName
})
}
}
So what am i doing wrong here ? is it the way i'm initializing ? Is it a problem with the mounted() or created() hook ? Or.. the way i'm setting the new value ?
UPDATE :
When console.log(this) :
Your this is not the Vue in addition to using the equality operator instead of the assignment operator. Try
const self = this
bus.$on('on-action', function (actionName) {
console.log("Selected action is : " + actionName)
self.modalComponent = actionName
})
or
bus.$on('on-action', function (actionName) {
console.log("Selected action is : " + actionName)
this.modalComponent = actionName
}.bind(this))
or
bus.$on('on-action', actionName => this.modalComponent = actionName)
See How to access the correct this inside a callback?
Allright... I figured out a better way to handle this problem with using state..
Source page (Usage) :
<a #click="toggleModal('refund')" class="btn btn-success btn-fixed-
width">Refundér</a>
<a #click="toggleModal('move')" class="btn btn-success btn-fixed-
width">Flytt</a>
Source page (Vue code to show modal component) :
toggleModal: function(actionName){
this.$store.dispatch('switchModalComponent', {
modalComponent: actionName
})
this.showModal = true;
}
Store.JS code :
export default new Vuex.Store({
state: {
visibleModalComponent: "empty"
},
getters: {
visibleModalComponent: state => state.visibleModalComponent
},
actions: {
switchModalComponent({ commit }, modalComponent){
commit(types.VISIBLE_MODAL_COMPONENT, modalComponent)
},
mutations: {
[types.VISIBLE_MODAL_COMPONENT] (state, modalComponent) {state.visibleModalComponent = modalComponent}
}
Mutationtypes.JS
export const VISIBLE_MODAL_COMPONENT = "VISIBLE_MODAL_COMPONENT"
Modal component (switching content based on source page context)
<h1>{{ visibleModalComponent.modalComponent }}</h1>
<script>
import { mapGetters } from "vuex"
export default {
name: "modal",
computed: {
...mapGetters(["visibleModalComponent"])
}
}
</script>
This way... you don't need to bother with a new VUE instance (bus), and the issues with using emit and on (which also doesn't behave 100%, due to first click not-working issues).
I am making an app which increments a value when you click a + button.
I am following the example from the documentation on Simple State Management.
I have set up an event handling method which increments a state value. This is triggered when a button is clicked. It updates the state value, but the template doesn't update.
To prove this, I have set up console logs in my increment function that fire and reflect the state value as expected. However, the value in the DOM never changes:
I have tried referring to the counterValue in the template as state.counterValue and store.state.counterValue but I get console errors for this.
What am I doing wrong?
Here is my template:
<template>
<div>
<h1>{{store.state.counterValue}}</h1>
<button v-on:click="increment">+</button>
</div>
</template>
Here is my script:
<script>
const store = {
debug: true,
state: {
counterValue: 0
},
increment() {
console.log('updating counterValue...')
this.state.counterValue = this.state.counterValue + 1
console.log(this.state.counterValue)
}
}
export default {
data() {
return {
counterValue: store.state.counterValue
}
},
methods: {
increment: function() {
store.increment()
}
}
}
</script>
The Problem With {{store.state.counterValue}}
From the docs
The mustache tag will be replaced with the value of the msg property on the corresponding data object.
Your data object (i.e. the component/vue-instance) does not have a property named store. To access const store, you need to proxy it through the component:
data() {
return {
store: store
}
},
The Problem With counterValue: store.state.counterValue
This sets this.counterValue equal to the initial value of store.state.counterValue. But there is no code keeping them in sync. So, when store.state.counterValue changes, counterValue will remain the same.
Solution
Proxy const store through the component as explained above. Example:
const store = {
debug: true,
state: {
counterValue: 0
},
increment() {
console.log('updating counterValue...')
this.state.counterValue = this.state.counterValue + 1
console.log(this.state.counterValue)
}
}
new Vue({
el: '#app',
data() {
return {
store: store
}
},
methods: {
increment: function() {
this.store.increment();
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>
<div id="app">
<h1>{{store.state.counterValue}}</h1>
<button v-on:click="increment">+</button>
</div>