Howto avoid, app crash if mongobd field "HelAll" do not exist?

help
1

My app crash with this:

                        <span class="title" v-if="prelist.HelAll[0]"><br>All: </span>
                        <div style="width:100%;" v-for="prelist2 in prelist.HelAll" :key="prelist2">
                          <span v-text="prelist2"></span>
                        </div>

I use Vuejs and Vuetify

2

I think you’ll find this article helpful:

In the case at hand, not sure why you have the v-if="prelist.HelAll[0]", i.e. checking the first position there. Changing this to v-if="prelist.HelAll.length" might help (can’t check right now in js). But it also might be that you’re trying to access the missing subdocument in your for loop, in which case you’d need to add an if for that too (like @tomcio showed below).

Also, ‘app crash’ is hardly a good way to describe an error. You really should find the time to at least copy the error from your console here to describe the situation. I think you’ll find that once you get deeper into more complex problems having the habit of describing the problem well becomes essential to receive help.

2 Likes
3

Maybe try to do something like that:

<div v-if="prelist.HelAll">
   <div style="width:100%;" v-for="prelist2 in prelist.HelAll" :key="prelist2">
      <span v-text="prelist2"></span>
   </div>
</div>

Or maybe try to check the length of HelAll array with .length? That should works.

4

Thanks it worked, perfect.

I forgot the error code, sorry

2 Likes
5

I am glad we could help :smiley_cat:

6

one last question.

is it possible to make a v-if where it will be true if there is a field starting with “Hel” like HelAll, Heldinner, Helbrunch… (need it for only show a title if true)

with mySQL i can do a “WHERE name LIKE ‘mat%’”

7

https://docs.mongodb.com/manual/reference/operator/query/regex/#perform-a-like-match

Regex is an option (searching the values of fields, not the field names, by the way). But since you seem to be interested in meal times and there’s only a limited amount of these, it’s likely far better to opt for a much simpler approach. If the data is already on the client in an object, just do an if with ||'s in your Vue code for the fields in question (Heldinner || Helbrunch || Helbreakfast). If it gets too noisy in the template you can separate it to a computed property. Or in mongo you can use the $exists operator on the fields. If you need to do anything more complex than that then it’s quite likely that the solution lies in altering the schema and not the queries.

8

I have about 50-60 Hel… fields if the person have checked them all

9

I have a problem when I use.

<div v-if="prelist.HelAll">
   <div style="width:100%;" v-for="prelist2 in prelist.HelAll" :key="prelist2">
      <span v-text="prelist2"></span>
   </div>
</div>

It works fine when there is no HelAll field in the DB but if there is a empty array HelAll then it still shows.

Howto say: if no array called HelAll and if HelAll array is empty then dont show

10

Maybe prelist.HelAll.length will do the job?

11

Got it to work with:

                        <div v-if="prelist.HelAll">
                          <div v-if="prelist.HelAll.length">
                            <span class="title"><br>All: </span>
                            <div style="width:100%;" v-for="prelist2 in prelist.HelAll" :key="prelist2">
                              <span v-text="prelist2"></span>
                            </div>
                          </div>
                        </div>

I hoped it could be done with less code. I have 50-60 of them

12

I made simple fiddle for you - https://jsfiddle.net/jq09j9g3/5/

As you can see, you can use && operator in v-if. And it works! :slight_smile:

1 Like
13

Now I only need to find out how I can tjeck if there is a part of a word in the document with “Hel” and not empty

if true then show header title “Food”

14

Maybe try to implement https://vuejs.org/v2/guide/computed.html#Computed-Properties. I think it should fit into your needs.

1 Like
15

I almost got it to work, not the most correct way but it looks like it works.

But howto define a variable in a div, it works with this but I dont want to show the number {{HelAllOnload =+ 1}}

16

I would do it as separate variable in data block in your app.

17

Got it to work with this code: (its not reactive when remove elements, but its okay)

<div v-if="prelist.HelAll.length" v-on:load="HelAllOnloadValue">

but cant find info about v-on:load in vue docs