Блог

У меня очень простое приложение VueJS, и у меня есть редактор TinyMCE в одном из компонентов, который использует Prism для выделения кода syntex. При вводе в редакторе TinyMCE код выглядит нормально, так как обычно prism выделяет syntex, когда вы пишете в редакторе tinymce. Я сохраняю весь html-код и отображаю его в другом компоненте.

Компонент Vue неправильно отображает код.

Я искал везде, но не нашел ничего подходящего для исправления этого. Я покажу вам код компонента.

 <template>
  <v-row>
    <v-col cols="6">
      <v-card class="blog-data">
        <div v-html="blogs"></div>
      </v-card>
    </v-col>
  </v-row>
</template>
 

Что я делаю, так это запрашиваю данные из API и сохраняю в blogs переменную, а затем передаю это как необработанный HTML-код внутри компонента vue.

Пожалуйста, дайте мне знать, что я здесь сделал неправильно, чтобы я мог исправить это правильно. Кстати, я пытаюсь встроить html-редактор для ведения блога, который может выделять код с множеством функций форматирования. Мой сайт доступен на https://www.springcoders.co.in

Я решил проблему, все, что нам нужно было сделать, это вручную присвоить данные компоненту, а затем в смонтированном vue крючке, который нам нужен для использования Prism API Prism.highlightAll() , работает очень хорошо.