我对Vue很陌生，我现在面临的一个问题是定义一个代表单个网格图块的功能Vue组件 .
此组件呈现为单个 div 元素 . 它需要两个道具来表示它在网格中的x / y位置，并且需要使用这两个道具来确定要应用于 div 的CSS类 . 本质上，我只需要一种方法来通过一个产生 classObject 的纯函数运行这些道具，然后我可以将其绑定到 div 的 class 属性 .
下面是我在_1739695中定义的模板和组件逻辑：
<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>
但是，这不起作用：我看到的只是 div 元素所在的空白区域，我的控制台中的错误如下：
vue.runtime.esm.js？ff9b：1737 TypeError：_vm.classObject不是函数
总而言之，我只是在寻找一种方法将道具处理成一个不同的对象，然后在我的模板中使用它 .
1 回答
现在这是不可能的 . 你可以追踪this related issue .
您必须手动编写渲染功能 .