VueJS: Eingabe mit dynamischem Wert + V-Modell

ppalmeida

Ich habe ein Problem mit VueJS beim Einstellen des Werts eines Eingangsradios UND eines V-Modells. Ich kann nicht verstehen, warum ich einen Wert für eine Eingabe nicht dynamisch festlegen und ein Modell verwenden kann, um die vom Benutzer ausgewählte Eingabe abzurufen.

Im Code ist leichter zu verstehen:

export default {
  props: ["question", "currentQuestion"],

  data() {
    return {
      answer: undefined
    }
  },
  computed: {
    isCurrent() {
      return this.currentQuestion && this.currentQuestion.id == this.question.id;
    }
  },
  methods: {
    groupName(question) {
      return 'question_id_' + question.id
    },
    inputType(question) {
      if (question.question_type_id == 2) return "checkbox";
      return "radio";
     }
  },
  mounted() {
    console.log('Component mounted.')
  }
    }

<template>
    <ul v-if="question.question_type_id != 4">
       <li v-for="option in question.options" :key="option.id">
         <div class="form-group">
           <label>
              <input v-model="answer" :value="option.id" :type="inputType(question)" 
    :name="groupName(question)" />
           {{option.option}}
           </label>
         </div>
       </li>
    </ul>
</template>

Wenn es also 4 Optionen gibt, sieht der Benutzer 4 Optionsfelder mit jeweils dem Wert "option.id" als Wert. Wenn der Benutzer auf das Optionsfeld klickt, wird das Modell "answer" mit diesem Wert gefüllt .

Wenn ich jetzt versuche, diese Datei zu kompilieren, wird folgende Fehlermeldung angezeigt:

: value = "option.id" steht in Konflikt mit dem v-Modell für dasselbe Element, da dieses bereits zu einer intern bindenden Wertebindung erweitert wird

Kann mir jemand helfen zu verstehen, wie ich einen Wert dynamisch auf eine Eingabe setze UND ein Modell zuordne, um den Wert abzurufen, wenn die Eingabe ausgewählt ist?

In der VueJS-Dokumentation auf dieser Seite steht übrigens genau, was ich versuche: https://vuejs.org/v2/guide/forms.html

Jede Hilfe wird sehr geschätzt.

Bert

Das Hauptproblem hierbei ist, dass Sie einen dynamischen Typ für das Eingabeelement haben. Ich gehe davon aus, dass Vue etwas verwirrt ist. valueist in Kombination mit v-modelfür eine Checkbox-Eingabe nicht gültig , es sei denn, Sie binden an ein Array.

Sie können dies mit einem v-if / v-else lösen.

<label>
  <input v-if="question.question_type_id == 2" 
         v-model="answer" 
         type="checkbox" 
         :name="groupName(question)" />
  <input v-else 
         v-model="answer" 
         :value="option.id" 
         type="radio" 
         :name="groupName(question)" />
  {{option.option}}
</label>

Arbeitsbeispiel .

Es gibt andere Probleme, aber dies behebt den Fehler, den Sie in der Frage erwähnen. Zum einen ist es wenig sinnvoll, mehr als ein Kontrollkästchen an ein einzelnes zu binden v-model, es sei denn, Sie binden an ein Array. In diesem Fall müssten Sie den Typ answeraustauschen, basierend darauf, ob es sich um ein Radio, ein Kontrollkästchen mit einem einzelnen Wert oder ein Kontrollkästchen mit mehreren Werten handelt. Scheint, als würde es kompliziert werden.

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am2020-11-21

Lass mich ein paar Worte sagen

0Kommentare

LoginNach der Teilnahme an der Überprüfung

Vorheriger Beitrag:Holen Sie sich die Menge der aktiv ausgewählten Produktvariante in WooCommerce

TOP Liste

Artikel

VueJS: Eingabe mit dynamischem Wert + V-Modell

VueJS: Eingabe mit dynamischem Wert + V-Modell

Wie kann ich in SCSS mehrere Klassen zu einer einzigen kombinieren?

Eclipse Oxygen - Projekte verschwinden

ElasticSearch BulkShardRequest ist aufgrund von org.elasticsearch.common.util.concurrent.EsThreadPoolExecutor fehlgeschlagen

Wie erstelle ich einen neuen übergeordneten Knoten außerhalb der .ref (/ path) in der Firebase-Echtzeitdatenbank mithilfe von Cloud-Funktionen (Typescript)?

Wie kann ich den Kaskadenmodus global einstellen?

So erhalten Sie eine gleichmäßige Höhe für alle Eingabefelder

Wie konvertiert man einen Datenrahmen im langen Format in eine Liste mit einem geeigneten Format?

Wie konvertiere ich einen Vektor von Bytes (u8) in eine Zeichenfolge?

Modbus Python Schneider PM5300

Gruppieren Sie Datenrahmenspalten nach ihrem Datum (die Spaltentitel enthalten) und fassen Sie die Instanzen von Einsen und Nullen in R . zusammen

Ärgerliches Problem mit yaml, das ich nicht lösen kann

So legen Sie mit dem Interface Builder unterschiedliche führende Speicherplätze für unterschiedliche Geräte fest

So berechnen Sie die Verfügbarkeit von Anwendungen (SLA)

Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

Wie kann ich meine Tabelle abfragen, um sie in mySQL nach 2 Feldern zu gruppieren?

Wie kann eine gleichmäßige Lastverteilung in ElasticSearch mit Indizes mit unterschiedlicher Anzahl von Shards erreicht werden?

ElasticSeach Auto Complete mit dem Vervollständigungsvorschlag, um das vollständige Dokument zurückzugeben

Python: Spalten mit demselben Namen zusammenführen, wobei der Mindestwert beibehalten wird

Wie wählt man Unterschiede mit drei Tabellen aus?

Speichern Sie ein MPAndroidChart-Diagramm in einem Bild, ohne es in einer Aktivität anzuzeigen

Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um