Vue.js v-bind 类在部署时条件始终为真

Question

我有一个使用 Laravel 和 Vue.js 的简单待办事项列表应用程序。v-bind:class="[{'todo-list__item-checked': todo.complete}]"下面代码中的条件类绑定在本地主机上对于开发模式和生产模式都可以正常工作。todo-list__item-checked一旦我将它部署到在线服务器，无论值是什么，类总是被设置todo.complete。我仔细检查了该todo.complete值是否正确。它是 0 或 1。对于复选框输入（始终选中）来说是一样的。

<ul class="todo-list text-left">

    <li v-for="todo in nonNullTodos" v-bind:key="todo.id" :id="'todo_'+todo.id" class="edit-item-icon-parent">

      <div class="list-item">

        <label :for="todo.id" class="list-label" role="button"> <input type="checkbox" v-model="todo.complete" :id="todo.id" @click="toggleComplete(todo.id)"> <span class="todo-list__text" v-bind:class="[{'todo-list__item-checked': todo.complete}]" :id="'todo_name_'+todo.id">{{ todo.name }}</span></label>

      </div>

      <div class="list-action">

        <i class="fa fa-pencil edit-item-icon" @click="editTodo(todo.id)"></i>

        <delete-button :item-id="todo.id" :item-type="'todo'"></delete-button>

      </div>

    </li>

</ul>

我似乎无法弄清楚这个问题。任何帮助表示赞赏。谢谢。

Answer 1

确保 的值为todo.compeletetypeof number。如果它是 '0'，它将被转换为true.&nbsp;最好使用布尔类型true或false.并且使用数组来:class定义多个类是没有问题的。（回复 Sélim Achour）