Question

下面是我想用来向学生显示数据的代码

    `<table class="table table-bordered">
            <thead>
              <tr>
                <th>Select </th>
                <th>Subject Code</th>
                <th>Subject Name</th>
                <th>Core/Elective</th>
                <th>Registration</th>
                <th>Approval</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="item in subjectData">
                <td align="center">
                        <label class="form-checkbox">
                            <input type="checkbox" v-bind:value="item.subject.id" v-model="selectedOption"><i class="form-icon"></i>
                        </label>
                </td>
                <td>{{item.subject.subjectCode}}</td>
                <td>{{item.subject.subjectName}}</td>
                <td v-if="item.subject.isElective === '0'">Core</td>
                <td v-if="item.subject.isElective === '1'">Elective</td>
                <td v-if="item.isRegistered === '1'">Registered</td>
                <td v-if="item.isRegistered === '0'">Not Registered</td>
                <td v-if="item.isApproved === '1'">Approved</td>
                <td v-if="item.isApproved === '0'">Not Approved</td>
              </tr>
            </tbody>
          </table> `

我正在从rest api获取数据，这是subjectData数组的数据

    `[
       { "id": 1, "subject": { "id": 1, "subjectCode": "DIT 0101","subjectName": "Introduction To 
        CSM","isElective": 0},"isApproved": 0, "isRegistered": 1 }, 
       { "id": 2, "subject": { "id": 3, "subjectCode": "DIT 0102","subjectName": "Introduction To 
        OS","isElective": 0},"isApproved": 1, "isRegistered": 1 } 
    ]`

不显示最后两个td。我该如何解决这个问题？问候

Answer 1

例如，您从rest API获得的数据被批准为INT，

，您所做的是将0与String进行比较。 v-if="item.isApproved === '0'"。

您只需要像这样将其与INT进行比较：

    <td v-if="item.subject.isElective === 0">Core</td>
    <td v-if="item.subject.isElective === 1">Elective</td>
    <td v-if="item.isRegistered === 1">Registered</td>
    <td v-if="item.isRegistered === 0">Not Registered</td>
    <td v-if="item.isApproved === 1">Approved</td>
    <td v-if="item.isApproved === 0">Not Approved</td>

通过这种方式，它应该可以工作。

在v-for中使用多个v-if

1 个答案: