Is there a way to call sessionStorage in section in Vuejs
Like
<template>
{sessionStorage}
</template>
When i call like this, i keep getting cant read property sessionStorage of null
if you want to show the data saved in sessionStorage in the template you should do this:
<template>
<div>{{ sessionStorage.getItem('someName') }} </div>
</template>
if you have JSON stored in sessionStorage and you want to show some property of that data you should parse it first like this:
<template>
<div>{{ JSON.parse(sessionStorage.getItem('someName')).propertyName }} </div>
</template>
but be careful because sessionStorage isn't a reactive data so if you change the storage after your vue component is rendered to DOM, you can't see the updated storage
Related
I have an array sheets initialised in data, has an item pushed to it when a button is pressed
data() {
return {
sheets: []
};
}
And in the html I'm trying to add a Card component for each element in this array and pass the data as a prop, but none of the components get rendered and there is no error message. I also tried putting the v-for directly on the component but it has the same result
<div id="sheets">
<template v-for="c in sheets">
<Card :info="c"/>
</template>
</div>
Meanwhile if I do something like this, it displays all the data in the array correctly, so I dont understand whats going wrong here
<div id="sheets">
<template v-for="c in sheets">
<span>{{c}}</span>
</template>
</div>
--
Solution
In my component the data from prop was being manipulated in the created() function, it works after I did this in the mounted() function instead
Make sure you have following things done correctly:
Imported your Card component
Passing and accessing the props
There are no conflicts in the variable names and id names
Next thing you need to know and is a must while using v-for is adding :key to the element which acts as unique id and lets Vue detect that each element is unique inside the v-for. One thing to be noted while using :key is that, you cannot use :key on the <template> tag.
Adding a validation using v-if would be a good idea, so v-for only executes if the array is not empty.
<div id="sheets">
<template v-if="sheets.length">
<Card v-for="(sheet,index) in sheets" :key="index" :info="sheet" />
</template>
</div>
Edit 1: As mentioned by Michal in the comments section that using index can lead to difficulties while debugging issues. You can use either :key="sheet" or if sheet is object including some unique id in it, then use :key="sheet.id" and get rid of the index
// use this if sheet is not an object
<div id="sheets">
<template v-if="sheets.length">
<Card v-for="sheet in sheets" :key="sheet" :info="sheet" />
</template>
</div>
OR
// use this if sheet is an object having some unique id in it
<div id="sheets">
<template v-if="sheets.length">
<Card v-for="sheet in sheets" :key="sheet.id" :info="sheet" />
</template>
</div>
As :key is not mandatory, It should work without that as well. I just created a working fiddle below. Please have a look and try to find out the root cause.
Vue.component('card', {
props: ['info'],
template: '<span>{{ info }}</span>',
});
var app = new Vue({
el: '#app',
data: {
sheets: [],
count: 0
},
methods: {
create() {
this.count++;
this.sheets.push('Sheet' + this.count);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<button #click="create">Create a Card!</button>
<template v-for="c in sheets">
<Card :info="c"></Card>
</template>
</div>
component
<template>
<div>
<b>Vuejs dynamic routing</b>
<div v-for="item in items" :key="item.id">
<b>{{ item.id }}.</b>
<router-link
#update="updateValue"
:to="{ name: 'UserWithID', params: { id: item.id, items: items } }"
>
{{ item.val }}{{ item.kk }}
</router-link>
</div>
<br /><br /><br />
{{ $route.params.id }}
</div>
</template>
Using props how to update the data in Vuejs?
I have two components called, helloworld, User. And i have mocked the data inside of helloworld.vue. Now using the props the want to get he data inside of the User component and preform the update operation . When trying to preform the logic.
Where onclick of button. it is going to method, But not updating the logic
I have kept console. inside method. and its printing. but logic not updating
As mentioned in the comments you are getting errors in the console as you are not passing the items as props to the User component and it is a required field in the User component.
And for the second point, you should store data in a separate file not in the main component so the items array doesn't get initialized again when the parent component is rendered again. The best option would be a global store(vuex) for sake of simplicity, it is done a separate file for now just as an example.
Here is a sample sandbox hope it helps:
https://codesandbox.io/s/exciting-ptolemy-35bsb?file=/src/components/User.vue
I got simplecomponent:
<template>
<v-chip>
<slot></slot>
</v-chip>
</template>
and I use it like that:
<formatted-date>2020-22-03</formatted-date>
how can I access the date given in the slot in the component?
If you need to manipulate the given data, use PROPS instead slots.
<template>
<v-chip>
{{ date }}
</v-chip>
</template>
<script>
...
props: ['date'],
...
</script>
And use it like that:
<formatted-date date="2020-22-03"></formatted-date>
This way you can access it using this.date inside the component.
Read more at: Official Docs - Props
Hi I'm making vue application and What I want to do is there's parentsComponent which has ChildOne and ChildTwo, the data is getting from same dataArray but childTwo has multiple data. and childTwo has childOneComponent inside. but I want to passed the data to ChildTwo from ParentsComponent and give it to ChildOne again.
is it possible?
ParentsComponent.vue
<template>
<ChildOneComponent :data="NewsData">
<ChildTwoComponent :data="NewsData.sports">
</template>
ChildOneComponent.vue
<div>
{{data.title}}
</div>
ChildTwoComponent.vue
<ChildOneComponent></ChildOneComponent>
It should be as below. You will have to pass the whole Newsdata object to your ChildTwoComponent as you are rendering ChildOneComponent from it.
You can update your template rendering of ChildTwoComponent accordingly.
ParentsComponent.vue
<template>
<div>
<ChildOneComponent :data="NewsData">
<ChildTwoComponent :data="NewsData">
</div>
</template>
ChildTwoComponent.vue
<ChildOneComponent :data="NewsData"></ChildOneComponent>
<template id="repeat" is="dom-repeat" items="[[model]]" as="day">
<component model="[[day]]"></component>
</template>
I am using iron local storage to load data as the [[model]].
When the data is updated using localStorage.setItem(...), how can I have the template to update and display the newly added object?
Right now the new object only displays after a page refresh, because it will reload the local storage.
I tried using this.$.repeat.render() as said by another stackoverflow post but that did nothing.
That pattern I would use would be:
<template>
<iron-localstorage name="my-app-storage" value="{{model}}" on-iron-localstorage-load-empty="initializeDefaultValue"></iron-localstorage>
<template id="repeat" is="dom-repeat" items="[[model]]" as="day">
<component model="[[day]]"></component>
</template>
</template>
And then when you want to update localstorage, just update the object because:
iron-localstorage automatically saves the value to localStorage when value is changed. Note that if value is an object auto-save will be triggered only when value is a different instance.
this.set('model', model);