ravenq / markdown-it-vue

The vue lib for markdown-it.
MIT License
348 stars 67 forks source link

There is bug when the markdown file comes from axios #42

Closed xiayulu closed 3 years ago

xiayulu commented 3 years ago

I rewrite the example:

<template>
  <div class="container">
    <textarea class="md-text" rows="10" v-model="content"/>
    <markdown-it-vue 
      class="md-body" 
      :content="content" 
      :options="options" 
      @render-complete=hdlCmplete 
    />
  </div>
</template>

<script>
import MarkdownText from './example'
import MarkdownItVue from '../../src'
import axios from 'axios'

export default {
  components: {
    MarkdownItVue
  },
  data () {
    return {
      content: MarkdownText,
      options: {
        markdownIt: {
          linkify: true
        },
        linkAttributes: {
          attrs: {
            target: '_self',
            rel: 'noopener'
          }
        }
      }
    }
  },
  methods: {
    hdlCmplete() {
      console.log('reder complete')
    }
  },
  mounted() {
    const url='/api/repos/delve/raw/master/README.md'
    axios.get(url)
    .then(res=>{
      this.content=res.data;
    })
    .catch(err=>console.error(err));
  },
}
</script>

And I get this in browser console:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "TypeError: Cannot read property 'length' of undefined"

found in

---> <MarkdownItVue> at src/markdown-it-vue.vue
       <Example> at example/components/example.vue
         <App> at example/App.vue
           <Root>
ravenq commented 3 years ago

show then res.data please.

xiayulu commented 3 years ago

Thanks for your help. Because I haven't worked on this project for a long time, I can't show more details for then res.data.