Vuejs check a row to see if it's not null

Question

I'm retrieving an object from my database and somme fields are nullable. I don't know how to check a particular to know the value.

<tr v-for="soin in soins" :key="soin.id">
  <td>{{soin.date}}</td>
  <td>{{soin.typesoin.name}}</td>
  <td>{{soin.categoriesoin.name}}</td>
  <td>{{soin.price}}</td>
  <td>{{soin.priceWithReduction}}</td>

  <!-- Nullable -->
  <td>{{soin.rabaisraison.name}}</td> 
  <!-- If null display nothing, if not, display value. -->

Same when I'm passing data to editing

<!--Buttons-->
                    <td>
                        <b-button @click="editingModalSoin(

                            soin.date, soin.price, soin.priceWithReduction, soin.referedBy, //Values

                            soin.moyendepaiement.id, soin.rabaisraison.id, 

                            soin.boncadeau.id, soin.bonreduction.id,//FK can be equal to null how do I do that

                            soin.categoriesoin.id, soin.typesoin.id,//FK
                            soin.id//rowid


                        ); setCRUDState('edit')"> <font-awesome-icon icon="edit" /></b-button>

                        <b-button @click="deleteSoin(soin.id)"> <font-awesome-icon icon="trash" /></b-button>
                    </td>

Thanks for reading

You don't need to worry about it in this case, null is already nothing so nothing will display and when you call editingModalSoin it'll just pass a null value for that parameter. Also I would just pass the object to editingModalSoin instead of individual parameters to clean your markup up so just @click="eidtingModalSoin(soin)". — Steven B.
– Steven B., Commented May 1, 2019 at 16:03
I get this though : Error in render: "TypeError: Cannot read property 'name' of null" — Pouissante
– Pouissante, Commented May 1, 2019 at 16:04

Steven B. · Accepted Answer · 2019-05-01 16:15:22Z

2

Use v-if:

<td>
  <template v-if="soin.rabaisraison">
  {{soin.rabaisraison.name}}
  </template>
</td>

If name is null it'll print nothing so you only need to check it's parent in this case.

edited May 1, 2019 at 16:15

answered May 1, 2019 at 16:07

Steven B.

9,4323 gold badges28 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pouissante Over a year ago

It works perfectly for the displaying, do you have an idea for passing the parameters if they are null? (soin.rabaisraison.id , soin.boncadeau.id, soin.bonreduction.id)

Steven B. Over a year ago

As noted in my above comment, I would pass the entire object as a parameter to editingModalSoin instead of individual parameters. This way you can do null checks in your function and it'll clean up your markup.

Collectives™ on Stack Overflow

Vuejs check a row to see if it's not null

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related