Question

我的vue模板存在一个小问题。代码如下：

<template>
<div class="panel panel-default" 
    v-bind:id="'panel_'+noeud.id">
    <div class="panel-heading">{{noeud.name}}</div>
    <div class="panel-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Noeud</th>
                    <th>Poid</th>    
                </tr>
            </thead>
            <tbody>
                <tr
                    v-for="noeud_poids in weightSorted" 
                    v-if="noeud_poids.macro_zonning_noeud_id_2 != noeud.id"
                    is="macrozonningproximitenoeudpoids"
                    :noeud_poids="noeud_poids"
                    :noeud="noeud"
                    :noeuds="noeuds"
                    :delete_callback="delete_final"
                    :change_callback="update_line">
                </tr>
                <tr>
                     <td>
                        <select v-model="new_noeud">
                            <option value=""></option>
                            <option v-for="one_noeud in noeuds " 
                                v-bind:value="one_noeud.id">{{one_noeud.name}}</option>
                        </select>
                    </td>
                    <td>
                        <input type="text" v-model="new_weight">
                    </td>
                    <td>
                        <input type="button" class="btn btn-primary" @click="addNoeudProximite" value="Ajouter"/>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
</div>
</template>

<script>
    export default {
        props: ['pnoeud', 'pnoeuds'],

        data: function(){
            return {
                points: 0,
                points_restants: 100,
                new_weight:0,
                new_noeud:0,
                noeud:this.pnoeud, 
                noeuds:this.pnoeuds,
                weightSorted:this.pnoeud.weightSorted
            }
        },

        mounted() {

        },

        methods:{

            delete_final(macro_zonning_noeud_id_2){
                axios.delete("/macrozonning/proximite/",{
                    params:{
                        macro_zonning_noeud_id_2:macro_zonning_noeud_id_2,
                        macro_zonning_noeud_id_1:this.noeud.id    
                    }
                }).then((res) => {
                    Vue.delete(this.weightSorted, String(macro_zonning_noeud_id_2));    
                })
            },

            update_line(nb_points){
                this.points_restants = this.points_restants - nb_points;
                this.points = this.points + nb_points;
            },


            addNoeudProximite(){
                axios.put('/macrozonning/proximite/', {
                    'macro_zonning_noeud_id_1': this.noeud.id,
                    'macro_zonning_noeud_id_2': this.new_noeud,
                    'weight': this.new_weight
                }).then((res) => {
                    Vue.set(this.weightSorted, String(this.new_noeud), res.data);
                });
            }
        }
    }
</script>

当我的列表的最后一项执行函数delete_final时，视图会被正确地重新呈现，因为我的列表的最后一项被删除了。但是当我尝试删除列表中的第一项时，视图会重新呈现，但最后一项已被删除。当我在devtools中检查Vue对象时，它不反映新视图，但它反映了所采取的操作（我的第一个项目已被删除）。

如果你知道这个问题来自哪里会很棒。

非常感谢社区

Answer 1

在使用key呈现的元素上使用v-for属性，以便在针对旧列表区分新节点列表时，vue可以准确识别VNode。见key attribute

<tr> v-for="noeud_poids in weightSorted" :key="noeud_poids.id" </tr>

与vue实例对象

1 个答案: