代码之家 › 专栏 › 技术社区 › The50

使用TypeScript从Twig获取数据的Vue.js错误属性不存在

twig vue.js typescript javascript

The50 · 技术社区 · 4 年前

我在Symfony应用程序上打印Twig模板的数据时遇到问题。我正在使用启用了TypeScript的Vue.js。

main.ts:

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>

我在编译时遇到了这个错误:

类型“Vue”上不存在属性“test”。

你觉得我做错了吗?我认为首先调用组件HeaderNav可能是问题所在,因为它会立即用类'headnav'覆盖元素,但我试图只为我网站上的单独元素创建组件,我不想把整个应用程序放在Vue.js中。

1 回复 | 直到 4 年前

praveen-me 4 年前

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

在带有typescript的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.com/how-to-write-a-vue-js-app-completely-in-typescript/