Question

我对Vue完全陌生，我无法理解在Vue.js中使用动态值渲染组件的正确方法。

所以我在下面有这个代码：

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>

我无法弄清楚为什么这段代码会渲染具有相同值的元素，我的意思是如果我在localStorage中有两个值，它会在localStorage上渲染两个带有最后一个元素的元素。

也许在创建循环时遇到了一些问题？我需要一些帮助来理解Vue渲染和修复我的功能

CodePen

非常感谢您将宝贵的时间花在我的问题上！谢谢你的帮助！

Answer 1

您有一个title变量和一个body变量。它不能在一个变量中存储两个值，因此第二个会覆盖第一个变量。你需要数组。

使用localStorage创建Vue.js动态元素

1 个答案: