Vue.js用TypeScript从Twig获取数据时出现错误属性不存在。

Question

我在Symfony应用中打印Twig模板的数据时遇到了麻烦。我使用Vue.js并启用了TypeScript。

我在使用Vue.js，并启用了TypeScript。

import HeaderNav from './components/HeaderNav.vue'
new HeaderNav({el: '.headnav'});

HeaderNav.vue:

<template>
<div class="headnav headnav-fixed z-depth-1">
    {{test}}
</div>
</template>

<script lang="ts">
import Vue from 'vue';
import { Component, Emit, Prop, Watch } from 'vue-property-decorator';

    @Component({
    props: {
        test: {
            type: String,
            default: "{}"
        }
    },
    mounted: function () {
        console.log(this.test);
    }
    })
    export default class HeaderNav extends Vue {}
</script>

header.html.twig:

<div class="headnav" data-test="hello"></div>

编译时我得到了这个错误。

属性'test'在'Vue'类型上不存在。

有什么想法是我做错了吗？我想可能是先调用组件HeaderNav的问题，因为它立即覆盖了具有 "headnav "类的元素，但我试图只为网站上的单独元素创建组件，我不想把整个应用程序放到Vue.js中。

Answer 1

我希望问题出在你定义的道具上。

在Vue中，你需要使用像这样的道具。

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({
  name: "HeaderNav"
})
export default class HeaderNav extends Vue {
  @Prop({ default: '' }) test!: string;

  created(){
    console.log(this.test)
  }
}

我希望这能帮助你。

欲了解更多信息，请查看这篇文章。https:/blog.logrocket.comhow-to-write-a-vue-js-app-completely-in-typescript。