Article From:https://segmentfault.com/q/1010000009556714
Question:

1.Render lists have input boxes, write values in different input boxes, and when deleting, the values in the input boxes are not the desired result

When I delete the second item, I need the result to be 1 in the first input box and 3 in the last.


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
     <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.3.3/vue.js"></script>
</head>
<body>
<div id="test">
    <div v-for="(item,index) in items">
        <div >
            <input type="" name="" v-model="arr[index]">
            <span v-text="Math.random()*10"></span>
        </div>
        <button @click="deleteItem(index,$event)">Delete < /button>< /div>< button @click= "addItem" > new < /button>< /div>< script type= "text/javascript" >Var VM = new Vue ({)El: "#test",Data:{Items:[],Keyword:1,Arr:[]},Methods:{AddItem:function () {This.items.push ({});},DeleteItem:Function (index, event) {/ / var $current = $(event.target);/ / $currenT.prev ().Attr ('key', 2);This.items.splice (index, 1);}}})≪ /script>< /body>< /html>

Answer 0:

In your case, data is stored inarr So, your code is slightly changed.

staythis.items.splice(index,1); Add one line below:

this.arr.splice(index,1);

You can achieve the effect you want.

Similar Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *