我对Vue很陌生，我现在遇到的一个问题是定义一个代表单个网格图块的功能性Vue组件。
此组件呈现为单个div元素。它需要两个道具来表示网格中的x / y位置，并且需要使用这两个道具来确定要应用于div的CSS类。基本上，我只需要一种方法来通过生成classObject的纯函数来运行这些道具，然后我可以将其绑定到class的{{1}}属性。
以下是我在div中定义的模板和组件逻辑：
GridSquare.vue<template functional>
<div :class="classObject(props)"></div>
</template>
但是，这不起作用：我看到的只是<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";
<script lang="ts">
export default {
props: {
xIndex: Number,
yIndex: Number
},
methods: {
classObject(props) {
const { xIndex, yIndex } = props;
return {
normal: true,
"thick-left": xIndex % 10 === 0,
"thick-top": yIndex % 10 === 0,
"thick-right": (xIndex + 1) % 10 === 0,
"thick-bottom": (yIndex + 1) % 10 === 0
};
}
}
};
</script>
元素所在的空白区域，我的控制台中的错误是这样的：
vue.runtime.esm.js？ff9b：1737 TypeError：_vm.classObject不是函数
总而言之，我只是在寻找一种方法将道具处理成一个不同的对象，然后在我的模板中使用它。