How to use the blur inside vue save changes to edit new data can be moved up and down-CodePudding

The first {{I + 1}} : & lt;/span>
CodePudding user response:
 
 
 

 
<meta charset="utf-8" & gt; 
  
<style> 
Ul {
list-style: none; 
} 
Textarea {
Outline: 0; 
} 
</style> 
 
<script SRC="https://cdn.bootcss.com/vue/2.6.10/vue.min.js" & gt; </script> 
<body> 
 
 The first {{I + 1}} : & lt;/span> 
 
 
 
 
 
 
 
<script type="text/javascript"> 
//click publish to generate another insert ul li, li needs to have four buttons, move down to delete and edit; 
//the first span according to the serial number, starting from 1. The content of the second span from input box. 
//click move up or down button, the button's li move up or down. 
//the first li cannot move up, and finally a li cannot move down 
//click the delete button to delete button li 
//click the edit button to edit the contents of the span. Can edit contenteditable is true. 
//modify data can be saved to move up and down 

//note: 
//data driven, you need to bear on the construction of similar array structure is as follows. 
//arr: [{content: 1111, edit: true}, {content: 222222, edit: false}] 
//by operating the array implementation up down, methods: arr. Splice (subscript, delete the number) 

New Vue ({
El: '# div', 
Data: {
MSG: ", "
Arr: [], 
}, 
Methods: {
Add (I) {
This. Arr. Push ({
Content: this MSG, 
Readonly: true 
}) 
This. MSG='
}, 
PgUp (d I) {
Var temp=this. Arr] [I - 1 
This. $set (this. Arr, I - 1, d) 
This. $set (this. Arr, I, temp) 
}, 
PgDn (d I) {
Var temp=this. Arr [I + 1] 
This $set (this. Arr, I + 1, d) 
This. $set (this. Arr, I, temp) 
}, 
Del (I) {
This. Arr. Splice (I, 1) 
}, 
Edit (I) {
This $refs [` t_ ${I} `] [0]. The focus () 
This. Arr [I] readonly=false 
}, 
} 
}) 
</script>