search

miaolz123 / vue-markdown

A Powerful and Highspeed Markdown Parser for Vue
https://miaolz123.github.io/vue-markdown/
MIT License
1.89k stars 257 forks source link

vue-markdown is not rendering #6

Closed ozee31 closed 7 years ago

ozee31 commented 7 years ago

Hi,

I try to generate markdown but does'nt work:

<template>
    <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
</template>

<script>
  import VueMarkdown from 'vue-markdown'

  export default {
    components: {
      VueMarkdown
    }
  }

</script>

output is: i am a ~~tast~~ **test**. in a <div>

miaolz123 commented 7 years ago

If you want to run it in html file, pls try like this:

<body>
  <vue-markdown>i am a ~~tast~~ **test**.</vue-markdown>
</body>
<script src="path/to/vue.js"></script>
<script src="path/to/vue-markdown.js"></script>
<script>
    Vue.use(VueMarkdown);
    var vm = new Vue({
        el: "body"
    });
</script>

There is also an example script in html file.

If you want to run it in ES6 javascript file, pls try like this:

import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  }
}

:)

ozee31 commented 7 years ago

I run vuejs 2.0 with ES6 in a .vue file.

with 

import VueMarkdown from 'vue-markdown'

export default {
  components: {
    VueMarkdown
  }
}

Markdown is not converted but not have erros in console

And if i try:

<template>
    <vue-markdown :source="mkd"></vue-markdown>
</template>

<script>
  import VueMarkdown from 'vue-markdown'

  export default {
    components: {
      VueMarkdown
    },

    data () {
      return {
        mkd: '# h1 Heading'
      }
    },
}
</script>

Output is empty (just a blank div)

miaolz123 commented 7 years ago

Got it! I'll check it soon.

ozee31 commented 7 years ago

It's an incompatibility with vuejs 2.0

For exemple ready replaced by mounted

jobn123 commented 7 years ago

i have the same problem ,it's not work on vuejs 2.0

ozee31 commented 7 years ago

waiting replace readyby mounted. It's work but there are warnings (deprecated comportment)

jobn123 commented 7 years ago

@ozee31 i can not totally understand your words, can you post your worked code if you are convenience ? thanks

ozee31 commented 7 years ago

in VueMarkdown.js

replace

ready() {
    if (this.$el.childNodes.length > 0) {
      this._source = ''
      for (let el of this.$el.childNodes) {
        const ext = el.outerHTML ? el.outerHTML : el.textContent
        this._source += ext
      }
    }
    rende(this)
    this.$watch('source', () => { rende(this) })
    this.watches.forEach((v) => {
      this.$watch(v, () => { rende(this) })
    })
  }

by

mounted() {
    if (this.$el.childNodes.length > 0) {
      this._source = ''
      for (let el of this.$el.childNodes) {
        const ext = el.outerHTML ? el.outerHTML : el.textContent
        this._source += ext
      }
    }
    rende(this)
    this.$watch('source', () => { rende(this) })
    this.watches.forEach((v) => {
      this.$watch(v, () => { rende(this) })
    })
  }
miaolz123 commented 7 years ago

I tried it just now and there is some problems. I'm wormking to fix this...

ozee31 commented 7 years ago

yes many warning

miaolz123 commented 7 years ago

@ozee31 Is it ok right now ?

ozee31 commented 7 years ago

ok it's work. Think you