Ich habe diese Vue 1 Komponente, die ein Objekt als Requisite erhält, das vom Benutzer gefüllt werden muss.

Das Objekt hat die folgende Struktur:

{
    property1: ...,
    property2: ...,
    inputs: {
        2130: { value: ..., comment: ... },
        2131: { ... },
        ...,
    }

}

Die Komponente ist ein einfaches Modal mit einem Formular, das alle notwendigen Eingaben enthält. Ich möchte einige Inhalte überprüfen, Berechnungen durchführen und Zellstile basierend auf Benutzereingaben ändern.

Wenn das Modal geladen wird, erstelle ich die Seite und lege das Modell für diese Eingaben anhand ihrer IDs fest:

v-model="object.inputs[subgroup[1].dx.mob.id].comment"

(Hinweis: subgroup[1]是包含表结构“定义”的另一个对象的一部分，通过执行 inputs[subgroup[1].dx.mob.id] Ich erwarte die verknüpften Tabellenfelder mit den entsprechenden Eingaben des Objekts)

Das Problem ist, egal was ich versuche, die Seite wird nicht neu gerendert. <input> Das Feld enthält nicht einmal den Wert, er verschwindet, sobald ich darauf klicke.

Was noch seltsamer ist, ist, dass die Werte tatsächlich festgelegt sind, aber die einzige Möglichkeit, die Komponente erneut zu rendern und all die guten Überprüfungen und Stile durchzuführen, die ich von ihm benötige, besteht darin, das Modal zu schließen und erneut zu öffnen oder es festzulegen auf dem übergeordneten Tisch des Tisches v-if.

Das sind offensichtlich keine realisierbaren Optionen

• Ich brauche eine responsive Seite
• Das Neuerstellen der Komponente (bei jeder Eingabeänderung) nimmt zu viel Zeit in Anspruch

Das habe ich versucht:

• Erstellen Sie dynamisch einen Beobachter für jede Eingabe
  • Aber vm.$watch das Objekt kann aus irgendeinem Grund nicht gefunden werden.

...forEach((input, index)=>{
    vm.$watch(`object.inputs[${index}].comment`, function(){
            this.$forceUpdate();
        })
}

• Die Eingabe in die berechnete Eigenschaft zurückgeben und beobachten

  • Aber die Seite kann die Änderungen nicht erkennen

• Manuell starten bei @change- und @input-Ereignissen this.$forceUpdate()

  • Aber $forceUpdate ist keine Funktion

• Deklarieren Sie einen Zähler in Daten und erhöhen Sie ihn bei @change- und @input-Ereignissen.

  • Aber die Seite ist immer noch nicht aktualisiert.

• Legen v-ifauf unsichtbare Objekte

  • Aber nur das besagte Objekt wird neu gerendert

• Verwenden Sie das Datenattribut, um das :key-Attribut der Komponente zu ändern

  • Aber nichts ist passiert

Wie erwartet kann ich dies nur tun, indem ich das Bauteil zerstöre und neu erstelle.

Hat jemand eine Lösung?

Die hässliche Lösung: Nach ein paar fehlgeschlagenen Versuchen habe ich etwas gefunden, das funktioniert, auch wenn es falsch ist. irgendein echtes Antworten sind weiterhin sehr willkommen.

Im Wesentlichen ist es mir gelungen, ein erneutes Rendern der Komponente zu erzwingen:

• Deklarieren Sie eine neue Variable in den Daten, ich habe sie benannt key (in meinem Fall ist es eine Zahl, aber alles reicht aus)
• Erstellen Sie eine update-Funktion, die update 函数，将 key von 1 auf 0 und umgekehrt wechselt.
• Binden Sie diese Funktion an jede Eingabe oder Auswahl @blurEreignis
• Da mein gesamtes Modal auf der Grundlage einer berechneten Eigenschaft gerendert wird, führe ich einige Lesevorgänge key innerhalb dieser Funktion durch (in Mein Fall ist, dass ich seinen Wert einer neuen Variablen zuweise und ihn dann protokolliere (nicht). Bestimmt, welcher der beiden das Rendern auslöst, aber ich vermute, dass es der erste ist Genug))

... 
data: function() {
      return {
        ... ,
        key: 0
      };   
},

...

methods: {
    ... ,
    update: function(){
        this.key = this.key == 0 ? 1 : 0
    }
},
computed: {
    ... ,
    testData: function () { //this functions builds an object that is used to render the page  
        var data = []
        var __self = this
        var blu = this.key // This is the line where i read key
        console.log(blu)
        this.test.inputs.forEach(function(input){

            var slug = input.slug.replaceAll('#', '').split('-')
        
            __self.setItem(data, slug, input)

        })
     
        console.log('data', data)
        return data // this value gets then passed to Object.entries() to get an iterable object I build the page with
    } 
}