Modify v-editable directive to react to data changes

[derekolson]

This fixes an issue that I encountered using nuxt full-static preview mode where my site loads the baked "published" storyblok json without the _editable fields on first open. When the nuxt preview mode re-fetches the live "draft" data, the v-editable directive has already run the bind function and does not set the required data attributes. This change makes the v-editable directive react to changes in the _editable data and will only run when the data has changed.

This also avoids having to use hacks like this (which also introduce a flash of content and dom rebuild):

this.story = { content: {} }
this.$nextTick(() => {
  this.story = res.data.story
})

[mahapo]

+1 Needed for static preview in nuxt
https://nuxtjs.org/docs/2.x/features/live-preview

[derekolson]

@mahapo if you need an interim solution I just wrote a nuxt plugin to override the v-editable binding myself:

// ./plugins/preview.client.js

import Vue from 'vue'

function overrideStoryblokDirective() {
  function addClass(el, className) {
    if (el.classList) {
      el.classList.add(className)
    } else if (!new RegExp('\\b' + className + '\\b').test(el.className)) {
      el.className += ' ' + className
    }
  }

  Vue.directive('editable', function (el, binding) {
    if (
      typeof binding.value._editable === 'undefined' ||
      binding.value._editable === null ||
      (binding.oldValue &&
        binding.oldValue._editable === binding.value._editable)
    ) {
      return
    }

    const options = JSON.parse(
      binding.value._editable.replace('<!--#storyblok#', '').replace('-->', '')
    )

    el.setAttribute('data-blok-c', JSON.stringify(options))
    el.setAttribute('data-blok-uid', options.id + '-' + options.uid)

    addClass(el, 'storyblok__outline')
  })
}

export default function ({ query, isDev, enablePreview }) {
  if (query._storyblok || isDev) {
    overrideStoryblokDirective()
    enablePreview()
  }
}