时间戳

首页 > 解决方案 > 部署时条件始终为真的 Vue.js v-bind 类

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

问题描述

我有一个使用 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>

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

标签： javascriptvue.js

解决方案

确保值为todo.compeletetypeof number。如果它是 '0'，它将转换为true. 最好使用布尔类型true或false.

:class并且使用数组来定义多个类是没有问题的。（回复 Sélim Achour）

推荐阅读