gpt4 book ai didi

vue.js - 属性 'renderChart' 在类型 'LineChartComponent' 上不存在

转载 作者:行者123 更新时间:2023-12-04 17:29:04 24 4
gpt4 key购买 nike

以下代码正在运行,但在我的控制台中引发了 TSLint/TS 错误

// Imports
import Vue from "vue";
import Component from "vue-class-component";
import { Line } from "vue-chartjs";

@Component({
extends: Line,
props: {
chartData: {
type: Object
}
}
})
export default class LineChartComponent extends Vue {
mounted() {
this.renderChart({ // <-- This line is the issue
labels: this.$props.chartData.labels,
datasets: [
{
data: this.$props.chartData.data,
borderColor: "",
borderWidth: 4
}
]
});
}
}

错误是:

TS2339: Property 'renderChart' does not exist on type 'LineChartComponent'.



我相信这与 this有关没有正确引用 Line 的 @component 扩展.如果我在组件上手动创建一个方法,我可以摆脱这个错误,但我应该只能使用 this以我的理解...
private renderChart!: (chartData: any, options?: any) => void; 

最佳答案

经过几个小时的尝试,这个解决方案对我有用:

import Vue from 'vue';
import { Line, mixins as chartMixins } from 'vue-chartjs';
import Component, { mixins } from 'vue-class-component';
import { ChartData } from 'chart.js';

const Props = Vue.extend({
props: {
chartData: {
type: Object as () => ChartData,
default: undefined
},
options: {
type: Object as () => ChartOptions,
default: undefined
}
}
});

@Component({
extends: Line,
mixins: [chartMixins.reactiveProp]
})
export default LineChart extends mixins(Props, Line) {
mounted(): void {
this.renderChart(this.chartData, this.options);
}
}

关于vue.js - 属性 'renderChart' 在类型 'LineChartComponent' 上不存在,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61354901/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com