Я импортировал компонент Vue из пакета tarball, но у меня появляется ошибка об использовании зависимости в этом компоненте?

Привет, я создал небольшой компонент под названием Test.vue (использование vue-lodash в качестве зависимости) и используется npm pack создать тарбол проекта (test-project), как я хотел бы проверить пакет локально, прежде чем публиковать его в NPM. У меня тогда есть второй проект (hello-world-project) где я установил тарбол (test-project-1.0.0.tgz) появляется в моем package.json хорошо. Затем я импортирую компонент Test.vue в мой HelloWorld.vue компонент, но я получаю следующую ошибку [Vue warn]: Error in render: "TypeError: Cannot read property 'upperCase' of undefined"

Как мне с этим разобраться?

Я пробовал все виды онлайн-решений, но ничего не работает.

тест-проект - App.vue

import Vue from 'vue'
import VueLodash from 'vue-lodash'

Vue.use(VueLodash, { name: 'lodash' })

import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

тест-проект - Test.vue

<template>
  <div>{{ test }}</div>
</template>

<script>
  export default {
    name: 'Test',
    props: {
      text: String
    },
    computed: {
        test() {
            return this.lodash.upperCase(this.text)  
        }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

Привет-мир-проект - HelloWorld.vue

<template>
  <div>
    <h1>Hello World</h1>

    <Test text="this is a test string" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import Test from "../../node_modules/test-project/src/components/Test.vue";

@Component({
    components: { Test }
})
export default class HelloWorld extends Vue {

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

</style>

Я ожидаю, что компонент Test.vue будет отображать входной текст заглавными буквами.

0 ответов

Другие вопросы по тегам