Vue.js dynamic element creation with localStorage

Question

I'm completely new to Vue and I can't understand the proper way to render components with dynamic values in Vue.js.

So I have this code below :

new Vue({
    el: "#notes",
    data: {
        title: "",
        body: ""
    },
    methods: {
        add: function() {
            localStorage.setItem($("#title").val(), $("#body").val());
            location.reload(true);
        },
        clear: function() {
            localStorage.clear();
            location.reload(true);
        }
    },
    created: function() {
        for (i = 0; i < localStorage.length; i++) {
            this.title = localStorage.key(i);
            this.body = localStorage.getItem(localStorage.key(i));
        }
    }
});

<div id="notes">
  <div class="container">
    <div class="form-group">
      <label for="title">Enter title</label>
      <input class="form-control" id="title"/>
    </div>
    <div class="form-group">
      <label for="body">Enter body</label>
      <textarea class="form-control" id="body"></textarea>
    </div>
    <div class="form-group">
      <button class="btn btn-primary" @click="add">Add</button>
    </div>
    <div class="card" style="width:18rem;" v-for="i in localStorage">
      <div class="card-body">
        <h5 class="card-title">{{title}}</h5>
        <p class="card-text">{{body}}</p><a class="card-link" @click="clear">Delete</a>
      </div>
    </div>
  </div>
</div>

And I can't figure out why does this code renders the elements with the same values, I mean if I have two values in localStorage it renders two elements with the value of the last one on localStorage.

Maybe there's some problem with the loop on created? I need some help with understanding the Vue rendering and fixing my function

CodePen

Thank you very much for spending your precious time with my issue! Thank you for any help!

[You do not need to mark questions as "SOLVED" via editing the title](//meta.stackexchange.com/a/116105/295637), or [posting updates/thanks in posts](//meta.stackexchange.com/a/109959/295637). Simply add your own answer, and mark as accepted. Anything additional can be perceived as noise for future visitors. See: [Can I answer my own question?](//stackoverflow.com/help/self-answer). — Blue, Jan 31 '18 at 14:30

score 0 · Accepted Answer · answered Jan 28 '18 at 18:51

0

You have one title variable and one body variable. It can't store two values in one variable, so the second overwrites the first. You need arrays.

answered Jan 28 '18 at 18:51

Roy J

42,522
10
78
102

Thank you very much for help, well, is there any way to use a localStorage object itself? – Jan 28 '18 at 18:52
1

You could probably build some behavior around [localStorage changes](https://stackoverflow.com/questions/22994774/detect-any-change-in-localstorage). Basically you need to copy the `localStorage` array into an array in your `data`. – Roy J Jan 28 '18 at 18:56
So if localStorage key also matters, then I need to store key and value into two different arrays, am I wrong? – Jan 28 '18 at 18:59
1

You could have two arrays, one for each key, or you could have an array of objects where each object has two keys. – Roy J Jan 28 '18 at 19:09
I'm so sorry, can you please review my changes? And I also don't know if it's possible to use .each or something similar to return each array value, not the whole array?(please watch through my code on CodePen to see that I mean) I'm very appreciate your help! And I'm really sorry for troubling you with my personal problems! Thank you very much! https://codepen.io/YegorGunko/pen/vdBjvB?editors=1010 – Jan 28 '18 at 19:09
1

Thank you very much, I fixed my problem based on your answer! – Jan 28 '18 at 19:25
I'm really sorry for troubling you again but I'm facing another problem. I use object now but after adding the new items to an object and then reading them, function returns just one value. You can see it by adding a note in my app. Any way to fix it? https://codepen.io/YegorGunko/pen/vdBjvB?editors=1010 – Jan 28 '18 at 19:42
1

Look at the `v-for` [here](https://codepen.io/anon/pen/BYBvpa?editors=1010) – Roy J Jan 28 '18 at 21:11
Haha, awesome, I tried something like v-for="i,e in titles,bodies". Sorry, so stupid, thank you so much! – Jan 29 '18 at 06:03

Vue.js dynamic element creation with localStorage

1 Answers1