Как сохранить новые строки в VueJS при импорте текста из raw-загрузчика и отформатированном с использованием showdown - PullRequest
Новая
       20

Как сохранить новые строки в VueJS при импорте текста из raw-загрузчика и отформатированном с использованием showdown

0 голосов
/ 23 мая 2019

Я работаю над сайтом, чтобы показать основную информацию о спорте.У меня (маленький) свод правил сохранен как rulebook.md.Мой проект использует webpack и последние vue-cli и yarn.

Для импорта книги правил я использую raw-loader и передаю содержимое в компонент Vue с именем markdown, который берет уценку и форматирует его с помощью *Модуль 1006 *.

@/components/Markdown.vue

<template>
  <div id="markdown">
    {{ source }}
    {{ converted }}
  </div>
</template>

<script>
import * as showdown from 'showdown'
const converter = new showdown.Converter()
converter.setOption('simpleLineBreaks', true)

export default {
  name: 'markdown',
  props: ['source'],
  data () {
    return {
      converted: converter.makeHtml(this.source)
    }
  }
}
</script>

<style lang="scss" scoped>
.markdown {
  white-space: pre-line;
  word-wrap: break-word;
}
</style>

@/views/punchies/Rulebook.vue

<template>
  <div id="punchies-rulebook" class="container">
    ...
    <markdown ... :source="source"></markdown>
  </div>
</template>

<script>
import Markdown from '@/components/Markdown.vue'
// eslint-disable-next-line
import source from 'raw-loader!@/views/punchies/misc/rulebook.md'

export default {
  name: 'rulebook',
  components: {
    'markdown': Markdown
  },
  data () {
    return {
      source
    }
  }
}
</script>

...

Я попытался установить showdown, чтобы использовать разрывы строк и сообщать CSSрендерить разрывы строк.Простое выполнение console.log(source) показывает книгу правил без разрывов строк.При поиске этой проблемы github raw-loader обнаружил проблему, в которой объясняется, что raw-loader сохраняет переводы строки.

1 Ответ

0 голосов
/ 24 мая 2019

В Markdown.vue 

<template>
    <p>{{source}}</p>
    <p v-html="converted"></p>
</template>
...