CODEWITHSUNDEEP
javascriptvue.js
TryingToBeABetterProgrammer
TryingToBeABetterProgrammer

Reputation: 15

Vue - Content of contenteditable is doubling without variable change

I have 4 contenteditables which I am copying to a variable.

If I write "1234" in Path2, then change to Title1 and then defocus Title1, then Path2 will change to "12341234", but the variable this.PC.Path2 will still be "1234".

This error occurs on only content editable - Path2. I have changed the name so only the Function updateHtml can interact with it(on my site) - no effect.

<div class="PathContainer" v-on:click="focusPath2">
      <div class="namespace edit path" contenteditable="true" @blur="updateHtml" name="Path">{{PC.Path}}</div>
      <div class="path editPath2" contenteditable="true" @blur="updateHtml" name="Path2" ref="Path2" >{{PC.Path2}}</div>
</div>
Title1: <span class="edit" contenteditable="true" @blur="updateHtml" name="Title2">{{ PC.Title2 }}</span><br>
Title2: <span class="edit" contenteditable="true" @blur="updateHtml" name="Title1">{{ PC.Title1 }}</span>

updateHtml: function(e) {
      var foo = e.target.getAttribute("name")
      console.log("PATH2---", this.PC.Path2);
      this.PC[foo] = e.target.innerText;
      console.log("PATH2---", this.PC.Path2);
      console.log("UPDATING this.PC." + foo, "  to-->", this.PC[foo]);
},

The Complete Code with Backend is on: https://github.com/i5heu/wikinota/tree/V2

Only the Code of this Module: https://github.com/i5heu/wikinota-web/blob/04629560ec0d6383b4ad8f92cb2647a616c559ce/js/pedit.js

Here is the Chrome Performance Profile. (with Pictures of the weird stuff) weird-bug.zip

I'm using Vue.js v2.5.16.

Upvotes: 0

Views: 243

Answers (1)

TryingToBeABetterProgrammer
TryingToBeABetterProgrammer

Reputation: 15

I have found a workaround for this problem.

I think the problem is in the DOM engine of Vue. So you have to trigger the DOM engine again to overwrite the content of the content-editable.

This is achieved by 1 Line.

updateHtml: function(e) {
  var foo = e.target.getAttribute("name");

  console.log("PATH2---", this.PC.Path2);

  this.PC[foo] = e.target.innerText;
  e.target.innerText = this.PC[foo]; //<<<< This is the workaround

  console.log("PATH2---", this.PC.Path2);
  console.log("UPDATING this.PC." + foo, "  to-->", this.PC[foo]);
}

Upvotes: 1

Related Questions