Question

我本周开始学习VueJS，当时我试图构建一个记事应用程序，但遇到了一些问题：

<div id="app">
        <h2>NOTES : </h2>
        <ol>
            <notelist v-for="n in notes" v-bind:note="n" v-bind:key="n.id">
            </notelist>
        </ol>
        <hr>
        <input id='ntitle'>
        <input id='ntext'>
        <button v-on:click="addnewnote"> + Add</button>
    </div>

和

Vue.component('notelist', {
    props: ['note'],
    template: '<li> {{ note.title }} - {{ note.text }}</li>'
  });

x = [
    {id:1,title : "Code" , text : "i should code tonight"},
]

if(localStorage.getItem("notes") == null){
    localStorage.setItem("notes" , JSON.stringify(x));
}

var app = new Vue({
    el: '#app',
    data: function() {
        return{
            notes : JSON.parse(localStorage.getItem("notes")),
        };

    },
    methods : {
        addnewnote(){
            var nte =  document.getElementById("ntitle").value;
            var ntt = document.getElementById("ntext").value;
            var nid = JSON.parse(localStorage.getItem("notes")).length + 1;

            var sd = {id:nid , title : nte , text : ntt};

            var NI = JSON.stringify(JSON.parse(localStorage.getItem("notes")).concat(sd));

            localStorage.setItem("notes" ,  NI);

           this.$forceUpdate()

        },



    }
  });

基本上，我是在本地存储中存储注释，单击+Add时会添加新注释，但是问题是添加新项时列表不会重新书写！这是我的代表https://repl.it/@bauripalash/FrostyMemorableDecagons

Answer 1

您还需要在方法`addnewnote（）中更新notes组件数据属性：

addnewnote() {
  const nte =  document.getElementById("ntitle").value;
  const ntt = document.getElementById("ntext").value;
  const nid = JSON.parse(localStorage.getItem("notes")).length + 1;

  const sd = { id: nid , title: nte , text: ntt };

  const NI = JSON.parse(localStorage.getItem("notes")).concat(sd);

  this.notes = NI;

  localStorage.setItem("notes" ,  JSON.stringify(NI));

  this.$forceUpdate()
}

这是为了使Vue组件知道数据属性已发生更改，并可以进行相应更新。通过此更改，您将不需要forceUpdate（）。 Vue不会监视localStorage的更改并自动更新Notes组件数据属性，您需要手动执行。

这里是example的动作。

还请考虑避免使用DOM方法获取输入的属性，而是实际使用Vue v模型将输入的值绑定到组件数据属性。

<input v-model="ntitle" id="ntitle">
<input v-model="ntext" id="ntext">

// ...

data: function () {
  return {
    ntext: '',
    ntitle: '',
    notes: JSON.parse(localStorage.getItem("notes")),
  };
}

// ...

const sd = { id: nid, title: this.ntitle, text: this.ntext };

希望有帮助！

v-for的VueJS forceUpdate不起作用

1 个答案: