Vue

by Turi S

HTML

<div id="app" v-delete-empty-text-nodes>
  <div v-for="item in list">
    {{ item }}
  </div>
  <button @click="list.push('list', 'of', 'items')">
    Add items
  </button>
</div>

Vue

function deleteEmptyTextNodes (el) {
  for (let node of el.childNodes) {
    if (node.nodeType === Node.TEXT_NODE && !/\S/.test(node.nodeValue)) {
      el.removeChild(node)
    }
  }
}

DeleteEmptyTextNodes =  {
  componentUpdated (root) {
    deleteEmptyTextNodes(root)
  }
}

new Vue({
  el: "#app",
  directives: {
  	DeleteEmptyTextNodes
  },
  data: {
    list: []
  }
})