首页 新闻 会员 周边 捐助

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来实现

echo_lovely的主页 echo_lovely | 小虾三级 | 园豆:1575
提问于:2023-05-31 10:50
< >
分享
最佳答案
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
lanedm | 老鸟四级 |园豆:2396 | 2023-05-31 10:59

我试试,看看这个怎么解决

echo_lovely | 园豆:1575 (小虾三级) | 2023-05-31 11:02
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类型了

echo_lovely | 园豆:1575 (小虾三级) | 2023-05-31 13:56
其他回答(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的功能。

Technologyforgood | 园豆:7633 (大侠五级) | 2023-06-02 21:17

是的,vscode的代码提示只能通过this.$data来,但是直接写是没有问题的

然后这个好像是vetur那个插件设置的问题,反正我把插件里的 validate 关于ts的关掉了,就不报错了

支持(0) 反对(0) echo_lovely | 园豆:1575 (小虾三级) | 2023-06-02 21:20
0

这个好像是vetur那个插件设置的问题,反正我把插件里的 validate 关于ts的关掉了,就不报错了。

也不知道是啥错,我也不会TS

echo_lovely | 园豆:1575 (小虾三级) | 2023-06-02 21:20
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册