javascript - vue js 不更新模型

Question

我在 vuejs(版本 2)上有一个奇怪的行为:

我有一个更新模型数据的方法，这个方法名为“AddServizi"，使用 v-on:click 触发，它完美地工作:

HTML

                        <input 
                    type="radio" 
                    v-bind:id="['gialla-'+index]"
                    name="serviziGialla" 
                    v-bind:value="servizio.nomeServizio"
                    v-model="giallaPicked"
                    v-on:click="AddServizi(servizio.selected,servizio.classe,servizio.nomeServizio,servizio.descrizione,servizio.descrizione_lunga,index,servizio.x,servizio.y)"/>
                    <label 
                    v-bind:for="['gialla-'+index]"
                    ><span></span>
                    </label>

JS

    AddServizi: function(selected,classe,nomeServizio,descriziones,descrizione_lungas,index,x,y){
    $("#sottoSelezionati").removeClass("in");
    this.servizi_selezionati.splice(0);
    if(selected==null){selected=false};
    if(!selected){
        this.servizi_selezionati.push({
            lineaApparte:classe,
            servizio:nomeServizio,
            descrizione : descriziones,
            descrizione_lunga : descrizione_lungas,
            index:index,
            x:x,
            y:y
        });
        this.servizi_selezionati_desktop[0].lineaApparte = classe;
    }

这更新了 vue 中定义的“servizi_selezionati”数据

问题现在我正在尝试使用 vue 实例中的另一种方法触发“AddServizi”方法，该方法是从子组件调用的:

子组件方法...

        this.$emit('centramappa',{nomeServizio,x,y,selected,classe,index,descrizione,descrizione_lunga});
    }   

..在 HTML 中调用

                    <lista-servizi-gialla 
                :servizi="modello"
                :extdesktop="servizi_selezionati_desktop[0].lineaApparte" 
                v-on:centramappa="mappaCenter($event)" 
                v-on:linebigger="inebigger($event)"
                v-on:cambiacolore="evidenziaLineaDiversa($event)"
                >
                </lista-servizi-gialla>

..主要 JS

mappaCenter : function({nomeServizio,x,y,selected,classe,index,descrizione,descrizione_lunga}){
  this.AddServizi(selected,colore,nomeServizio,descrizione,descrizione_lunga,index,x,y);
}

mappacenter 调用 AddServizi，但这次方法不更新模型...有人知道为什么吗？提前谢谢你

Answer 1

问题是，当您使用类似 this.servizi_selezionati_desktop[0].lineaApparte = classe; 的东西时，您正在绕过 vue react 。

你应该使用 Vue.set(this.servizi_selezionati_desktop[0], lineaApparte, classe)

在这里阅读更多:https://v2.vuejs.org/v2/guide/reactivity.html