Ace-Diff не показывает левые и правые данные с Vue.js - PullRequest
Новая
       66

Ace-Diff не показывает левые и правые данные с Vue.js

0 голосов
/ 27 февраля 2019

Я использую Vue.js и Ace-diff для генерации различий между двумя материалами.Но он не показывает данные в левом и правом компараторе, он генерирует разницу, к которой можно получить доступ через console.log.Ace-diff ссылка , как его использовать пример
Мой код: 

//HTML part
<div id="flex-container">
    <div>
        <div class="acediff-class" id="editor-left">{{this.leftContent}}</div>
    </div>

    <div id="acediff-gutter"></div>

    <div>
        <div class="acediff-class" id="editor-right">{{this.rightContent}}</div>
    </div>
</div>
//Java script part
        mounted() {
            var differ = new AceDiff({mode:"ace/mode/javascript",
            left: {
              id:'editor-left',
              editable: false,
            },
            right: {
              id:'editor-right',
            },
          });
          var editors = differ.getEditors();
          var leftString = "var a = {\n propertyA: 12,\n propertyB: 123, \n propertyC: 321, \n}";
          var rightString = "var a = {\n propertyX: 12,\n propertyZ: 123, \n propertyC: 321, \n}";
          editors.left.setValue(leftString, 1);
          editors.right.setValue(rightString, 1);
          this.rightContent = rightString;
          this.leftContent = leftString; 
          console.log("---diff--",differ);       
  },

Я добавил всю необходимую библиотеку js и Css, как туз.js, ace-diff.js, diff_match_patch.js ace-diff.min.css

...