Повторное использование компонента Vue в html с помощью unpkg


Повторное использование компонента Vue в html с помощью unpkg

15.10.2020 01:01:23 Просмотров 54 Источник

Очень трудно повторно использовать компонент Vue (vue-json-pretty) через unpkg. Я думаю, что мне не хватает некоторых основ, но я не мог справиться с этим сам.

Мой HTML:

<link rel="stylesheet" href="https://unpkg.com/fiori-fundamentals@latest/dist/fiori-fundamentals.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/fundamental-vue@latest/dist/FundamentalVue.umd.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vue-json-pretty@1.7.0/lib/styles.css"/>
<script src="https://unpkg.com/vue-json-pretty@1.7.0/lib/vue-json-pretty.js"></script>

<div id="app">
  <div>
    <vue-json-pretty
      :path="'res'"
      :data="{ key: 'value' }"
      @click="handleClick">
    </vue-json-pretty>
  </div>
  <div>
    <fd-popover v-fd-margin:large placement="bottom-start" with-arrow>
      <h1 v-fd-margin:large>
        			  
			  				
У вопроса есть решение - Посмотреть?

Ответы - Повторное использование компонента Vue в html с помощью unpkg / Reuse Vue component in html with unpkg

Является ответом!
Khaleel

15.10.2020 02:25:29

Вам нужно объявить vue-json-pretty как компонент. в противном случае Vue не знает, что это за тег. Объявите это сверху Вот так

Vue.component("vue-json-pretty", VueJsonPretty.default);
new Vue({
  el: '#app',
  data: {
    json: '{"count":4}'
  },
  methods: {
    handleClick: function() {
      console.log("clxicked!")
    },
  },
})
Помочь в развитии проекта:
Закрыть X