vue bind类类型设置中的类型记录

Question

我使用Vue3(vite)证监会，下面是我的代码片段：

<button :class="{'button__active': checked === '1'}">1</button>
<button :class="{'button__active': checked === '2'}">2</button>

打字稿有错误的信息：

Type '{ button__active: boolean; }' is not assignable to type 'string | boolean | undefined'。ts(2322)

我不知道怎么处理这件事，或者打字稿可以跳过检查，谢谢？

Answer 1

也许稍微改变一下语法会有帮助吗？

<button :class="{checked === '1' ? 'button__active': ''}">1</button>
<button :class="{checked === '2' ? 'button__active': ''}">2</button>

Answer 2

它应该能工作，我在代码片段中试过了，而且它没有任何警告/错误。

​

new Vue({
  el: '#app',
  data: {
    checked: '1'
  }
})

.button__active {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/4.8.0-beta/typescript.min.js"></script>
<div id="app">
  <button :class="{'button__active': checked === '1'}">1</button>
  <button :class="{'button__active': checked === '2'}">2</button>
</div>

​