Laravel + Vuejs: Сделать весь текст в строке таблицы красным / опасным для текста

Question

Я использую v-if и v-else. Если штраф> 0, то весь текст внутри строки должен быть красным? Как нам это сделать?

Мой код ниже работает, но это беспорядок. Я не знаю, как его почистить. Или, может быть, есть способ лучше?:

                <tr v-for="issue in issues" :key="issue.id">
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.firstname}} {{ issue.lastname}}</span></td>
                    <td v-else>{{ issue.firstname}} {{ issue.lastname}}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.description}}</span></td>
                    <td v-else>{{ issue.description}}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.dateloaned | myDate }}</span></td>
                    <td v-else>{{ issue.dateloaned | myDate }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.datedue | myDate }}</span></td>
                    <td v-else>{{ issue.datedue | myDate }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.daterenewed  | myDate }}</span></td>
                    <td v-else>{{ issue.daterenewed  | myDate }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.datereturned }}</span></td>
                    <td v-else>{{ issue.datereturned }}</td>
                    <td v-if="issue.fine > 0"><span class="text-danger font-weight-bold">{{ issue.fine }} </span></td>
                    <td v-else>{{ issue.fine }}</td>

                </tr>

Answer 1

Вы можете установить класс в зависимости от некоторых условий. Я бы сделал go примерно таким:

                <tr v-for="issue in issues" :key="issue.id" :class="issue.fine > 0 ? 'text-danger font-weight-bold': ''">
                    <td>{{ issue.firstname}} {{ issue.lastname}}</td>
                    <td>{{ issue.description}}</td>
                    <td>{{ issue.dateloaned | myDate }}</td>
                    <td>{{ issue.datedue | myDate }}</td>
                    <td>{{ issue.daterenewed  | myDate }}</td>
                    <td>{{ issue.datereturned }}</td>
                    <td>{{ issue.fine }}</td>

                </tr>

Вы также можете go с:

<tr v-for="issue in issues" :key="issue.id" :class="{'text-danger font-weight-bold': issue.fine > 0}">...</tr>

проверить документы классов здесь: https://vuejs.org/v2/guide/class-and-style.html