CODEWITHSUNDEEP
vue.js
Musa
Musa

Reputation: 19

Using multiple v-if inside v-for

Below is my code that i want to use to display data to student

    `<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> `

I am getting the data from a rest api and here is the data of the subjectData array

    `[
       { "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 } 
    ]`

The last two td are not displayed. How do i solve that issue? Regards

Upvotes: 1

Views: 45

Answers (1)

El-Hani
El-Hani

Reputation: 183

The Data that you get from rest API has for example isApproved as INT,

and what you do is comparing 0 as String. v-if="item.isApproved === '0'" .

You just have to compare it as INT like that: 

    <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>

In this way it should works.

Upvotes: 1

Related Questions