Я импортировал компонент 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 будет отображать входной текст заглавными буквами.