Визуализируйте [объект HTMLTableElement] в VueJS - PullRequest
Новая
       44

Визуализируйте [объект HTMLTableElement] в VueJS

0 голосов
/ 30 мая 2018

для тех из вас, кто пробовал jsdifflib , знайте, что этот плагин возвращает HTMLTableElement .Прямо сейчас я хочу попробовать отобразить это на моем компоненте VueJS.

Я пробовал следующее:

ШАБЛОН 

<div class="diff-container" v-html="dynamicHtmlContent" ref="auditContainer"></div>

КОМПОНЕНТ 

export default {
    name: 'AuditView',
    data() {
      return {
        dynamicHtmlContent: null
      }
    },
    created() {
      // code logic here and there
      this.processDataDiff(results, 0);
    },
    methods: {
      processDataDiff: function (data, index) {
        // code logic here and there
        this.displayDiff(
          JSON.stringify(object1, null, 4).replace(/\\n/g, '\n'),
          JSON.stringify(object2, null, 4).replace(/\\n/g, '\n'),
          versionId1,
          versionId2
        );
      },
      displayDiff: function (baseDoc, newDoc, baseVersion, newVersion) {
        this.dynamicHtmlContent = auditService.getDiff(baseDoc, newDoc, baseVersion, newVersion);
      }
    }
}

Служба ES6 

 getDiff(baseTextRaw, newTextRaw, baseVersion, nextVersion) {
   // build the diff view and return a DOM node
   return difflib.buildView({
     baseText: baseTextRaw,
     newText: newTextRaw,
     // set the display titles for each resource
     baseTextName: 'Version ' + baseVersion,
     newTextName: 'Version ' + nextVersion,
     contextSize: 10,
     // set inine to true if you want inline
     // rather than side by side diff
     inline: false
   });
 }

Я пропустил логику кода, но я уже проверил dynamicHtmlContent , и он возвращается в качестве объекта HTML, как показано на снимке экрана ниже:

Screenshot

Каким-то образом это невозможно с использованием v-html, поскольку он только визуализирует объект {}, как сказано в console.log(typeof this.dynamicHtmlContent); Так как мне отрендерить это в моем Vue Component?Я также считаю, что это трудно преобразовать в простую строку.Пожалуйста, помогите мне в этом.

1 Ответ

0 голосов
/ 30 мая 2018

Вы все еще можете использовать v-html, вам просто нужно изменить то, к чему вы обращаетесь.Поскольку то, что вы получите, в конечном итоге станет фактическим элементом DOM, вы можете сделать несколько вещей.

Первое - просто изменить v-html для доступа к свойству outerHTML * 1005.* вашего элемента 

v-html="dynamicHtmlContent.outerHTML"

Или сохраните outerHTML непосредственно в dynamicHtmlContent вместо элемента DOM 

this.dynamicHtmlContent = auditService.getDiff().outerHTML

Другая вещь, которую вы можете сделать, это непосредственно добавить элемент DOM с помощью доступ к вашей ссылке auditContainer через this.$refs

displayDiff: function (baseDoc, newDoc, baseVersion, newVersion) {
  var table = auditService.getDiff(baseDoc, newDoc, baseVersion, newVersion);
  this.$refs.auditContainer.appendChild( table );
}

Обратите внимание, что это необходимо сделать после того, как компонент был смонтирован, так как auditContainer еще не будет создан,Значение: 

created() {
  // code logic here and there
  this.processDataDiff(results, 0);
},

будет изменено на: 

mounted() {
  // code logic here and there
  this.processDataDiff(results, 0);
},

v-html Demo 

var table = document.createElement('table');
var body = table.createTBody();
var row = body.insertRow();
var cell = row.insertCell();
cell.innerHTML = "A test table";

var vm = new Vue({
  el: '#app',
  data() {
    return {
      dynamicHtmlContent: null
    }
  },
  created() {
    this.displayDiff();
  },
  methods: {
    displayDiff: function() {
      this.dynamicHtmlContent = table;
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div class="diff-container" v-html="dynamicHtmlContent.outerHTML" ref="auditContainer"></div>
</div>

DOM append Demo 

var table = document.createElement('table');
var body = table.createTBody();
var row = body.insertRow();
var cell = row.insertCell();
cell.innerHTML = "A test table";

var vm = new Vue({
  el: '#app',
  data() {
    return {
      dynamicHtmlContent: null
    }
  },
  mounted() {
    this.displayDiff();
  },
  methods: {
    displayDiff: function() {
      this.$refs.auditContainer.appendChild(table);
      
    }
  }
});
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
  <div class="diff-container" ref="auditContainer"></div>
</div>
...