Vue-Modell nicht aktualisieren

Wenn ich versuche zu aktualisieren meine benutzerdefinierte text-area-Komponente die Modell-Daten this.message='<span id="foo">bar</span> text und html wird nicht angezeigt, in der htmltextarea-tag, wie es sollte, aber ich kann sehen, dass die Updates angewendet, die in der Vue dev Konsole. Ich habe auch versucht den Wechsel zu einem Objekt statt als string zu haben und mit Vue.set, aber das funktioniert auch nicht.

Irgendwelche Vorschläge, wie man dieses Problem beheben?

Dem Ziel, mit der htmlTextArea Komponente ist, erhalten die Benutzer text aus dem htmlTextArea-tag (das funktioniert), Bearbeiten Sie diesen text, und binden Sie es zurück zu der textarea, aber mit HTML-Code in es.

Benutzerdefinierte text-area-Komponente:

<template>
  <div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>
<script>
export default {
  //Custom textarea 
  name: 'htmlTextArea',
  props:['value'],
  mounted: function () {
      this.$el.innerHTML = this.value;
  },
  methods: {
      updateHTML: function(e) {
          this.$emit('input', e.target.innerHTML);
      }
  }
}
</script>

Andere Komponente: 

<template>
...
<htmlTextArea id="textarea" v-model="message"></htmlTextArea>
...
</template>
<script>
      data: {
        return {
          message: 'something'//this works
        }
      }
     ...
     methods: {
      changeText() {
        this.message='<span id="foo">bar</span>'//this does not
      }
     },
     components: {
         htmlTextArea
     }
</script>
InformationsquelleAutor orangeMint | 2018-04-13
  1. 9

    Müssen Sie legen Sie den Wert explizit nach der value Requisiten ändern. Sie können Uhr für value ändern.

    <template>
    <div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>
<script>

export default {
  //Custom textarea
  name: "htmlTextArea",
  props: ["value"],
  mounted: function() {
    this.$el.innerHTML = this.value;
  },
  watch: {
      value(v) {
          this.$el.innerHTML = v;
      }
  },
  methods: {
    updateHTML: function(e) {
      this.$emit("input", e.target.innerHTML);
    }
  }
};
</script>
    • Eigentlich dachte ich, das hat funktioniert, aber jetzt wenn ich in mein textarea-es-Typen alles, was in umgekehrter. So 'foo bar' wird 'rab oof'. Irgendeine Idee warum?
    • Pls demo in js fiddle?
    • Aber springt der cursor an den Anfang des Absatzes, nach dem schreiben ein Wort
    InformationsquelleAutor Jacob Goh
  2. 2

    Ändern Sie die data Eigenschaft in einer Funktion, wie Sie es definiert, es ist nicht reaktiv.

    data () {
    return {
        message: 'something'//this works 
    }
}

    Wenn Sie jetzt das update der message Eigenschaft in der Methode, wird die Komponente entsprechend aktualisieren.

    Reaktivität in der Tiefe

    • Sie sind richtig, allerdings habe ich eigentlich schon hatte, die Rückkehr in es, ich wollte nur nicht, kopieren Sie es über hier. Es ist immer noch nicht funktionieren, obwohl
    InformationsquelleAutor DigitalDrifter
Schreibe einen Kommentar