Vue.JS 中的本地存储答案

【问题标题】：Local-Storage in Vue.JSVue.JS 中的本地存储
【发布时间】：2019-11-08 00:56:38
【问题描述】：

我正在研究 Vue.JS，并尝试使用本地存储来保存数据。在我的代码中，我可以使用本地存储存储和检索所有数据，但线路通过效果除外。在这里，我试图将直通效果的实际布尔值存储在本地存储中，并希望在待办事项列表应用程序中检索该值。

<title>To Do List</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js'></script>
    <style>
      .taskDone {
        text-decoration: line-through;

      }
    </style>
  </head>
  <body>
  <div id="todo-list" class="container">
    <div class="container col-sm-8 col-sm-offset-2">
      <h1 class="text-center"> <big><b> To Do List </b> </big></h1>

        <h5 class="text-center"> <span v-show="itemsTodo.length"> ({{ itemsTodo.length }} pending) </span></h5>
        <div class="col-md-8">
        <button v-if="state === 'default'" class="btn btn-primary" @click="changeState('edit') ">Add Item</button>
        <button v-else class="btn btn-info" @click="changeState('default')">Cancel</button>
      </div>

    <br>
    <br>
    <div v-if="state === 'edit'" >
      <div class="col-sm-4">
        <input class='form-control' v-model="newItem"  type="text" placeholder="Type here" @keyup.enter="saveItem"  >
      </div>
      <div class="col-sm-4">
        <input class="form-control" v-model="newdate"  type="date"   type="text"/>
        </div>

      <div class="col-sm-4">
        <button class='btn btn-primary btn-block'  v-bind:disabled="newItem.length === 0"@click= "saveItem">Save Item</button>
      </div>
    </div>
<br>
<br>
      <ul type="none" class="list-group">

      <li class="list-group-item" v-for="(item,index,date) in items" :class="{taskDone : item.completed}" >

      <h4>
      <input type="checkbox"  v-model="item.completed" @click="item.completed = !item.completed">
      <button class="btn btn-primary " @click.stop="removeitems(index)">&times; </button>
      <b><i>  {{ item.label }} {{ item.date }} </i></b></h4>

       </li>
      </ul>
      <h2 v-if="items.length === 0">Nice Job! Nothing in TO DO LIST</h2>
    <div class="col-sm-4">
      <button class="btn btn-warning btn-block" @click="clearcompleted"> Clear Completed</button>
    </div>
    <div class="col-sm-4">
      <button class="btn btn-danger btn-block" @click="clearAll"> Clear All</button>
    </div>
  </div>
</div>

2. Vue.JS code
<script src="https://unpkg.com/vue" ></script>
    <script>
        var todolist = new Vue({
        el: '#todo-list',
        data : {
          state : 'edit',
          header: 'To Do List',
          newItem: '',
          newdate: '',
          items: [
                  {
                    label:'coffee',
                    completed:false,
                    date:'2019-06-20' ,
                  },
                  {
                    label:'tea',
                    completed:false,
                    date:'2019-06-19' ,
                  },
                  {
                    label:'milk',
                    completed:false,
                    date:'2019-06-19' ,
                  },

                ]
        },

        computed:{
          itemsDone(){
            return this.items.filter(items => items.completed)
          },
          itemsTodo(){
            return this.items.filter(items =>! items.completed)
          },
        },

        methods:{
          saveItem: function(){
            if (this.newItem != ''){
              this.items.push({
                label:this.newItem,
                completed: false,
                date : this.newdate,
              });
            this.newItem = '';
            this.newdate = '';
          }},


          changeState: function(newState){
            this.state = newState;
            this.newItem = '';
            this.newdate = '';
          },
          removeitems(index){
            this.items.splice(index,1);
          },
          clearcompleted (){
            this.items = this.itemsTodo;
          },
          clearAll: function(){
            this.items = [ ];
          },
        },
          mounted(){
            console.log('App Mounted!');
            if (localStorage.getItem('items')) this.items = JSON.parse(localStorage.getItem('items'));

          },

          watch: {
            items:{
              handler(){
                localStorage.setItem('items',JSON.stringify(this.items));
              },
            },
          },
      });
    </script>

我希望将直通效果的正确布尔值存储在本地存储中。这样，适当的效果就会在浏览器上显示出来。

【问题讨论】：

标签： vue.js local-storage

【解决方案1】：

你只是在看项目。如果您更改项目中的某些内容（在您的情况下为 completed），则不会调用处理程序并且您的更改不会被存储。

您可以使用“深度”观察程序，但我建议您在更改某些内容时调用您的保存逻辑。

【讨论】：