Vuejs otrzymają starą wartość podczas zmiany wydarzenia

Question

Proszę zapoznać się z moim fragmentem poniżej. Jak mogę uzyskać starą wartość zmienionego modelu, w tym przypadku jest to wiek w vuejs?

var app = new Vue({ 
 
    el:"#table1", 
 
    data:{ 
 
    items:[{name:'long name One',age:21},{name:'long name Two',age:22}] 
 
    }, 
 
    methods:{ 
 
    changeAge:function(item,event){ 
 
     alert(item.age); 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<table class="table table-cart" id="table1"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr v-for="(item,index) in items"> 
 
     <td>{{item.name}} :</td>  
 
     <td> 
 
     <input type="text" name="qty" 
 
       v-model="item.age" 
 
       @change="changeAge(item,$event)"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Próbuję użyć zegarka, ale nie jestem w stanie znaleźć żadnej pomocy w oglądaniu wieku tablicy elementów.

Answer 1

Nie można uzyskać starej wartości zmiany elementu zgodnie z wyjaśnieniami here. Również podczas oglądania obiektu, nie można uzyskać starszej wartości, jak wyjaśniono here, dopóki odniesienie do obiektu się nie zmieni.

Aby obejść te można utworzyć obliczana właściwość, która będzie klonem danych items i można umieścić obserwatora na tej nieruchomości komputerowej poznać starą wartość, jak również, Zobacz działający kod poniżej:

var app = new Vue({ 
 
    el:"#table1", 
 
    data:{ 
 
    items:[{name:'long name One',age:21},{name:'long name Two',age:22}] 
 
    }, 
 
    watch:{ 
 
    clonedItems: function(newVal, oldVal){ 
 
     alert(JSON.stringify(newVal)); 
 
     alert(JSON.stringify(oldVal)); 
 
    } 
 
    }, 
 
    computed:{ 
 
    clonedItems: function(){ 
 
     return JSON.parse(JSON.stringify(this.items)) 
 
    } 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<table class="table table-cart" id="table1"> 
 
    <thead> 
 
    <tr> 
 
     <th>Name</th> 
 
     <th>Age</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr v-for="(item,index) in items"> 
 
     <td>{{item.name}} :</td>  
 
     <td> 
 
     <input type="text" name="qty" 
 
       v-model="item.age"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>