ABP框架vue版，前端页面奇怪的问题
0
悬赏园豆：20
[已解决问题]
解决于 2023-07-06 16:14
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'CMDItem',
props: {
cmdList: {
type: Array,
required: true,
},
},
data() {
return {
content: 1,
}
},
computed: {
content() {
// 从哪里获取来的
return 'aaaa'
},
cmdTop() {
return this.cmdList.slice(0, 5) // 这里提示 Property 'slice' does not exist on type 'ComputedOptions<any> | (() => any)'.
},
cmdDown() {
return this.cmdList.slice(5) // 这里也是
},
},
methods: {
setContent(){
this.$data.content += 1
}
},
})
</script>
问题
只要有关 this.cmdList的地方都会报错
Property 'slice' does not exist on type 'ComputedOptions<any> | (() => any)'.
然后this也点不出来data的对象，只能通过 this.$data.content += 1来实现
最佳答案
0
这个问题可能是由于 TypeScript 在编译时类型检查失败导致的。ComputedOptions 类型是 Vue 中的一种计算属性选项类型，它可能无法正确推断出 cmdList 属性的类型，导致 TypeScript 无法正确检查代码。
你可以尝试在 computed 中使用函数来定义计算属性，例如：
cmdTop() {
return this.cmdList.slice(0, 5)
},
cmdDown() {
return this.cmdList.slice(5)
},
这样可以让 TypeScript 正确地推断出计算属性的返回值类型，从而避免类型错误。
另外，你也可以在 computed 中使用 Array.prototype.slice.call 将 cmdList 转换为数组类型，例如：
cmdTop() {
return Array.prototype.slice.call(this.cmdList, 0, 5)
},
cmdDown() {
return Array.prototype.slice.call(this.cmdList, 5)
},
这样也可以解决类型检查失败的问题。
收获园豆：20
我试试，看看这个怎么解决
cmdTop() {
return Array.prototype.slice.call(this.cmdList, 0, 5)
},
cmdDown() {
return Array.prototype.slice.call(this.cmdList, 5)
},
这么写是没有问题的，我上面就是用的函数式声明，我感觉是vue2.x这种方式让ts无法推断props中的属性，然后props全部算作any类型了
其他回答(2)
0
根据您提供的代码，报错提示是因为在computed属性中使用了this.cmdList，而在Vue组件的computed选项中，不能直接访问组件实例的属性。解决这个问题的方法是将computed属性中的cmdTop和cmdDown改为方法而不是属性。
以下是修改后的代码示例：
typescript
Copy code
<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
name: 'CMDItem',
props: {
cmdList: {
type: Array,
required: true,
},
},
data() {
return {
content: 1,
}
},
methods: {
getCmdTop() {
return this.cmdList.slice(0, 5)
},
getCmdDown() {
return this.cmdList.slice(5)
},
setContent() {
this.$data.content += 1
}
},
})
</script>
通过将cmdTop和cmdDown修改为方法，而不是computed属性，可以解决报错问题。然后，您可以通过在模板中调用这些方法来获取cmdTop和cmdDown的值：
html
Copy code
<template>
<div>
<!-- 调用方法获取cmdTop和cmdDown的值 -->
<div>{{ getCmdTop() }}</div>
<div>{{ getCmdDown() }}</div>
</div>
</template>
这样就可以正确地获取cmdTop和cmdDown的值了。此外，您还可以通过this.$data.content来访问data属性中的content值，以实现增加content的功能。
是的，vscode的代码提示只能通过this.$data来，但是直接写是没有问题的
然后这个好像是vetur那个插件设置的问题，反正我把插件里的 validate 关于ts的关掉了，就不报错了
0
这个好像是vetur那个插件设置的问题，反正我把插件里的 validate 关于ts的关掉了，就不报错了。
也不知道是啥错，我也不会TS
