Vue implements local storage add, delete and modify functions

This article example shares the specific code of Vue to implement local storage addition, deletion and modification for your reference. The specific content is as follows

Functionality:

The input is added to the ongoing list.

Double-click to modify the function.

Click the Esc key to cancel, or the previous content,

Click Enter to successfully modify.

The modification is successful when the modification frame loses focus.

When the button is selected, it enters the completed list, and when it is not selected, it enters the ongoing list.

Click Delete to delete the row.

The last added files will still be there when you open the local storage next time.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  *{
   padding: 0;margin: 0;
  }
   ul{
    list-style: none;
   }
   li{
    width: 220px;
    height: 40px;
    border: 1px solid gainsboro;
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #6CE26C;
   }
   .del{
    margin-right: 5px;
    border: none;
    width: 20px;
    height: 20px;
    background-color: #008200;
   }
  </style>
 </head>
 <body>
  <div id="app">
   <!-- Filter the leading and trailing spaces in the input content-->
   <!-- Enter event -->
   <input type="text" v-model.trim="temp" @keyup.enter="additem()"/>
   <!-- Get the number of ongoing operations -->
   <h3>In progress{{undolist.length}}</h3>
   <ul class="list">
    <!-- Display the content being traversed -->
    <li class="item" v-for="item in undolist" :key="item.name">
     <div class="">
      <!-- The multiple-select box is in the unchecked false state -->
     <input type="checkbox" v-model="item.done" />
     <!-- The default state is 0. When double-clicked, the state is 1 and the content is assigned to tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- The content of the input box is the value of tempEdit. When state=1, the input box is displayed.
     When you click Esc, the state is hidden and the content remains the original value without modification.
     When the state is 0 when pressing Enter, the input box is hidden and the modified tempEdit is assigned to item.name
     When the state is 0 when the focus is lost, the input box is hidden and the modified tempEdit is assigned to item.name
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==1" 
     @keyup.esc="item.state=0;tempEdit=item.name"
     @keyup.enter="item.state=0;item.name=tempEdit"
     @blur="item.state=0;item.name=tempEdit"
     />
     </div>
     <!-- Delete its contents when clicking delete -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
   <!-- Completed quantity -->
   <h3>Completed {{doneList.length}}</h3>
   <ul class="list">
    <!-- Traverse and display the completed content-->
    <li class="item" v-for="item in doneList" :key="item.name">
     <div class="">
      <!-- The multiple-select box is in the selected true state -->
     <input type="checkbox" v-model="item.done" />
     <!-- The default state is 0. When double-clicked, the state is 1 and the content is assigned to tempEdit-->
     <span v-show="item.state==0" @dblclick="item.state=1;tempEdit=item.name">{{item.name}}</span>
     <!-- The content of the input box is the value of tempEdit. When state=1, the input box is displayed.
     When you click Esc, the state is hidden and the content remains the original value without modification.
     When the state is 0 when pressing Enter, the input box is hidden and the modified tempEdit is assigned to item.name
     When the state is 0 when the focus is lost, the input box is hidden and the modified tempEdit is assigned to item.name
      -->
     <input type="text" v-model="tempEdit" v-show="item.state==1" 
     @keyup.esc="item.state=0;tempEdit=item.name"
     @keyup.enter="item.state=0;item.name=tempEdit;"
     @blur="item.state=0;item.name=tempEdit;"
     />
     </div>
     <!-- Delete its contents when clicking delete -->
     <button type="button" @click="removeitem(item)" class="del">X</button>
    </li>
   </ul>
  </div>
 </body>
 <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
 <script type="text/javascript">
  var vm = new Vue({
   el:"#app",
   data(){
    return {
     // List list // getItem is to obtain local storage data,
     // || "[]" If no array list can be obtained, convert it to an empty array list: JSON.parse(localStorage.getItem("list")|| "[]"),
     // Temporary data storage temp:'',
     // Temporary data storage place for modification box tempEdit:''
    }
   },
   methods:{
    // add additem(){
     // Return when the text box is empty if(this.temp===""){return;}
     // Add to the back this.list.push({
      name:this.temp,
      done:false,
      state:0
     })
     // Clear the temporary box this.temp="";
    },
    // delete removeitem(item){
     // Pop-up box var flag = window.confirm ("Are you sure you want to delete?");
     if(flag){
      // Find the index value of the element that meets the conditions var ind=this.list.findIndex(value=>value.title===item.title);
      // splice deletes one from ind this.list.splice(ind,1);
     }
    }
   },
   computed:{
    // Calculate the completed and unfinished list data by calculating // Unfinished undolist(){
     // filter array function, if the return result is true, the currently traversed data is retained // otherwise it will be filtered out return this.list.filter(item=>!item.done);
     
    },
    // Completed doneList(){
     return this.list.filter(item=>item.done);
    }
   },
   watch:{
    "list":{
     handler(){
      // setItem sets local data // JSON.stringify converts js object to json string // JSON.prase converts string to js object localStorage.setItem("list",JSON.stringify(this.list))
     },
     deep:true,
    }
   }
  })
 </script>
</html>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Vuex combined with storage to realize local storage of user information
Implement vuex local storage using vuex-persistedstate
Summary of Vue browser local storage issues
How to change fonts in Vue, locally store fonts without referencing online font libraries
Vue generates a token and saves it to local storage
How to monitor local storage in real time in Vue

<<: Solution to the problem that order by is not effective in MySQL subquery

>>: Specific use of stacking context in CSS