Level 8
I have not tested this, and you may have more issues, but it looks like you don't have a property called hash on the parent component, but you are calling this.hash in the computed method.
1 like
Jun 24, 2022
8
Level 1
computed not refresh
I have the child component
<template>
<t-modal
@before-close="onCloseModal" :escToClose="true" name="child"
>
<div class="sticky top-3 right-10 w-full flex justify-end mt-2" v-if="showButtonCloseForever">
<a
@click="closeForever"
href="#" class="hyperlink font-medium">
check
</a>
</div>
</t-modal>
</template>
<script>
import {modalActionListenerMixin} from "../utils/mixins/modalActionsListener";
export default {
mixins: [modalActionListenerMixin],
name: "ChildComponent",
props: {
element: {
required: true,
},
showButtonCloseForever: {
type: Boolean,
required: false,
default: false
}
},
methods: {
closeForever() {
this.$modal.hide(`child`)
this.$emit('close-for-ever')
}
}
}
</script>
in the parent component:
<template>
<ChildComponent
@close="onClose"
@close-for-ever="onCloseForever"
:show-button-close-forever="!isInLocalStorage"
/>
</template>
<script>
import ChildPianificationModal from "../form_modals/ChildPianificationModal";
export default {
components: {ChildComponent},
comments: {},
name: "ChildSection",
props: {
child: {
required: true,
},
icons: {
required: true
}
},
data() {
return {
childElement: this.child
}
},
mounted() {
if (!this.isInSessionStorage && !this.isInLocalStorage) {
this.showModal()
}
},
methods: {
...
onCloseForever() {
this.saveChildOnLocalStorage()
},
saveChildOnLocalStorage() {
const localStorageChild = localStorage.getItem('child');
let localStorageChildArray = null;
if (localStorageChild) {
localStorageChildArray = JSON.parse(localStorageChild);
if (!localStorageChildArray.includes('pippo')) {
localStorageChildArray.push('pippo')
}
} else {
localStorageChildArray = ['child']
}
localStorage.setItem('child', JSON.stringify(localStorageChildArray))
},
},
computed: {
isInLocalStorage() {
const localStorageChild = localStorage.getItem('child');
if (localStorageChild) {
const localStorageChildArray = JSON.parse(localStorageChild);
return localStorageChildArray.includes('pippo')
}
return false
}
}
}
</script>
<style scoped>
</style>
when the event @ close-for-ever = "onCloseForever" is propagated, it inserts the element but the computed isInLocalStorage is always false, if I update the page it becomes true, but I would like it to become true without the refresh
Level 1
@goldtaste sorry for a typo
1 like
Level 63
Computed properties are cached and are only updated according to the any modification of their dependencies.
Level 1
@vincent15000 so the only alternative is that type of control do it in the child component?
1 like
Level 8
Can't you just make the computed method a normal method, and call it after this.saveChildOnLocalStorage() in the onCloseForever method. Sorry, maybe missing what you are trying to do.
2 likes
Level 8
Sorry, see that it is not as easy as that. You could set a flag in the data object for local storage. And just upodate the value when you call isInLocalStorage. And then wrap the flag in a computed method.
1 like
Level 1
@goldtaste how could I do? I have no idea
1 like
Level 8
Actually, you may not need to use a computed property.
So do something like
data() {
return {
childElement: this.child,
isInLocalStorage: false
}
},
And
methods: {
doIsInLocalStorage() {
const localStorageChild = localStorage.getItem('child');
if (localStorageChild) {
const localStorageChildArray = JSON.parse(localStorageChild);
return localStorageChildArray.includes('pippo')
}
return false
}
}
And then in
onCloseForever() {
this.saveChildOnLocalStorage()
this.isInLocalStorage = this.doIsInLocalStorage()
},
And
mounted() {
this.isInlocalStorage = this.doIsInLocalStorage()
if (!this.isInSessionStorage && !this.isInlocalStorage) {
this.showModal()
}
},
I have not tested this. But may give you a place to start.
2 likes
Please or to participate in this conversation.