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

Question

我在从 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>

我在编译时遇到这个错误：

Property 'test' does not exist on type 'Vue'.

有什么想法是我做错了吗？我认为首先调用组件 HeaderNav 可能是问题所在，因为它会立即覆盖具有 class '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.com/how-to-write-a-vue-js-app-completely-in-typescript/

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

Vue.js with TypeScript getting data from Twig error Property does not exist

javascript

twig

typescript

vue.js

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

Vue.js with TypeScript getting data from Twig error Property does not exist

javascript

twig

typescript

vue.js

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