I'm trying to make a localStorage object reactive, so that if it updates, it will also update in other tabs using that same object. I'm using Vue.js and have tried to create a computed property that returns the localStorage object, but this doesn't work. How can I make the object reactive and make it update in other browser tabs also?
computed: {
localStorageObject() {
return JSON.parse(localStorage.getItem('object'));
}
}
#Matthias has the start of an answer, but it won't react to changes in other tabs. To do that, you can handle the StorageEvent. Here's a rough sketch that you could enhance as desired.
const app = new Vue({
el: '#app',
data: {
name: ''
},
methods: {
onStorageUpdate(event) {
if (event.key === "name") {
this.name = event.newValue;
}
}
},
mounted() {
if (localStorage.name) {
this.name = localStorage.name;
}
window.addEventListener("storage", this.onStorageUpdate);
},
beforeDestroy() {
window.removeEventListener("storage", this.onStorageUpdate);
},
watch: {
name(newName) {
localStorage.name = newName;
}
}
});
There is an example of how to achieve this on the Vue.js cookbook page: https://v2.vuejs.org/v2/cookbook/client-side-storage.html
In the example, a name is stored in local Storage.
const app = new Vue({
el: '#app',
data: {
name: ''
},
mounted() {
if (localStorage.name) {
this.name = localStorage.name;
}
},
watch: {
name(newName) {
localStorage.name = newName;
}
}
});
Related
I have the following setup for my vue application
var store = {
...
state: {
currentCustomer:{},
},
};
current customer has a property that is an object called payment method
app:
var app= new Vue({
el:'#application',
data: {
sharedState: store.state
}
});
and a couple of components:
Vue.component('user_search', {
template: '#user_search-template',
data() {
return {
sharedState: store.state
}
},
methods: {
getCustomerData: function () {
this.sharedState.currentCustomer(c);
}
mounted: function () {
...
}
});
and
Vue.component('paymentdetails',{
template: '#payment_details_template',
data(){
return{
sharedState: store.state
}
},
mounted:function(){
...
}});
The issue is like this. The payment method component does not bind to the payment details object that is nested inside the current customer object
any suggestions?
Yeah, I think what you are looking for is a computed property for accessing the data.
Vue.component('paymentdetails',{
template: '#payment_details_template',
computed{
sharedState() {
return store.state
}
},
mounted:function(){
...
}});
Maybe give that a try and see how it works.
I'm pretty new in Vue-js and I'm trying to use this.
My App is not a SPA and I'm also working with Laravel.
I've tried this and it works fine:
const app = new Vue({
el: '#app',
mounted() {
this.myLazyLoad = new LazyLoad({
elements_selector: '.lazy',
class_loaded: 'lazy-loaded',
load_delay: 500, //adjust according to use case
threshold: 100, //adjust according to use case,
callback_enter: function(el) {
console.log(el.getAttribute("data-src"));
}
});
}
});
<img data-src="{{ $featuredItem->anime->getPortraitImg()}}"
class="lazy img-fluid" src="/img/placeholder-anime.jpg">
But there is a problem when I try to use the lazyload in a Component.
For example:
export default {
mounted() {
console.log('Component mounted.');
console.log(Vue.prototype.LazyLoad);
this.myLazyLoad = new LazyLoad({
// elements_selector: '.lazyx',
container: document.getElementById('lazyContainer')
});
// myLazyLoad.loadAll();
},
data() {
return {
episodes: {},
currentPage: 2
}
},
methods: {
loadMoreEpisodes() {
let uri = '/api/v1/episodes?page=' + this.currentPage;
this.axios.get(uri).then(response => {
console.log(response.data.data);
if (this.episodes.length === undefined) {
this.episodes = response.data.data;
} else {
this.episodes = this.episodes.concat(response.data.data);
}
this.myLazyLoad.update();
this.myLazyLoad.loadAll();
});
}
}
}
The new data inserted by axios is not recognized by the lazyload plugin.
I'm using this.myLazyLoad.update(); as stated in the documentation, but I'm not able to get it to work. Any suggestions?
I think DOM is not updated when you call update() method. Can you try using $nextTick?
this.$nextTick(() => {
this.myLazyLoad.update()
})
From my main vue instance I am trying to detect when a route is changed. So far what i have learned that i need to deep watch an object to detect property changes. But my approach is not working. What am i doing wrong:
const app1 = new Vue({
el: '#app1',
router,
data: {
activeRoute: router.currentRoute
},
methods: {
printclass: function() {
console.log(router.currentRoute.path);
}
},
computed: {
},
watch: {
'router.currentRoute': {
handler(newVal) {
console.log('changed');
}, deep: true
}
},
created: function() {
console.log(router.currentRoute);
}
});
I know that the currentRoute object's path property changes when the route changes(i.e; a different component is rendered).
Watch the $route.
watch: {
'$route' (to, from) {
this.yourFunction(
},
I'm trying to:
get element's data #click using getDetails method and put it into fileProperties: []
and then send that data to store using fileDetails computed property
This worked for my other components which have v-model and simple true/false state, but I'm not sure how to send the created by the method array of data to the store properly.
In other words, how do I make this computed property to get the data from fileProperties: [] and commit it to store? The fileDetails computed property below is not committing anything.
Code:
[...]
<div #click="getDetails(file)"></div>
[...]
<script>
export default {
name: 'files',
data () {
return {
fileProperties: []
}
},
props: {
file: Object
},
methods: {
getDetails (value) {
this.fileProperties = [{"extension": path.extname(value.path)},
{"size": this.$options.filters.prettySize(value.stat.size)}]
}
},
computed: {
isFile () {
return this.file.stat.isFile()
},
fileDetails: {
get () {
return this.$store.state.Settings.fileDetails
},
set (value) {
this.$store.commit('loadFileDetails', this.fileProperties)
}
}
}
}
</script>
store module:
const state = {
fileDetails: []
}
const mutations = {
loadFileDetails (state, fileDetails) {
state.fileDetails = fileDetails
}
}
Example on codepen:
https://codepen.io/anon/pen/qxjdNo?editors=1011
In this codepen example, how can I send over the dummy data [ { "1": 1 }, { "2": 2 } ] to the store on button click?
You are never setting the value for fileDetails, so the set method of the computed property is never getting called. Here's the documentation on computed setters.
If the fileProperties data is really just the same as the fileDetails data, then get rid of it and set fileDetails directly in your getDetails method.
Here's a working example:
const store = new Vuex.Store({
state: {
fileDetails: null
},
mutations: {
loadFileDetails (state, fileDetails) {
state.fileDetails = fileDetails
}
}
})
new Vue({
el: '#app',
store,
data() {
return {
fileProperties: null
}
},
methods: {
getDetails (value) {
this.fileDetails = [{"1": 1}, {"2": 2}]
}
},
computed: {
fileDetails: {
get () {
return this.$store.state.fileDetails
},
set (value) {
this.$store.commit('loadFileDetails', value)
}
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
<h1>element data:</h1>
{{fileDetails}}
<hr>
<h1>store data:</h1>
<p>(should display the same data on button click)</p>
{{fileDetails}}
<hr>
<button #click="getDetails">btn</button>
</div>
I have child component and want to pass some data to it's parent.
My child component looks like:
// <button #click="sendClick($event)">Send</button>
// ...
data: function (){
return {
mycode: ""
}
},
methods: {
sendClick(e)
{
bus.$emit('change', this.mycode);
}
}
My parent component looks:
var app = new Vue({
el: '#app',
data: {
currentView: 'past-form',
mycode: ''
},
methods:
{
changeView()
{
this.currentView = 'past-form'
console.log(this.mycode);
},
},
created()
{
bus.$on('change', function(mycode){
this.mycode = mycode;
});
}
})
I haven't found a better place for placing bus.$on (bus is declared globally) than in created(), but the docs state that created() is for stuff that should be initialized after the page is loaded. The created() block works; I checked it by placing in it console.log(this.mycode), but should I move emit handler somewhere else?
It's look like my code does not execute mycode: '', because console.log(this.mycode); does not print anything.
As I mentioned in the comment, if your component is a direct child of your Vue, then there is no need for a bus.
That said, the created handler is fine for adding your bus event handler.
I expect the issue you have is a this issue. Try changing your handler to
bus.$on('change', mycode => this.mycode = mycode)
See How to access the correct this inside a callback?
Here is an example.
console.clear()
const bus = new Vue()
Vue.component("child", {
template: `<button #click="sendClick($event)">Send</button>`,
data: function() {
return {
mycode: "something"
}
},
methods: {
sendClick(e) {
bus.$emit('change', this.mycode);
}
}
})
var app = new Vue({
el: '#app',
data: {
currentView: 'past-form',
mycode: ''
},
methods: {
changeView() {
this.currentView = 'past-form'
console.log(this.mycode);
},
},
created() {
bus.$on('change', mycode => {
this.mycode = mycode
this.changeView()
})
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script>
<div id="app">
<child></child>
Parent mycode: {{mycode}}
</div>