Cannot read property .slice of null

[captbaritone]

I get this on initial page load.

I'm guessing it happens here?

https://github.com/davemacdo/composer-diversity/blob/e71d83fae11d38a498daa91d63a229c691f14ddf/src/FormInputs.vue#L14

[davemacdo]

Yes. That error has been showing up for a while, and I agree that line is the likely culprit.

I think it's an order of execution issue, but I haven't found a good solution yet. Any ideas?

[captbaritone]

Looks like you need to assign this.filterOptions in created but you are not assigning it until mounted my guess is it's crashing on the first render, but after it "mounts" it renders again and doesn't crash this time.

https://github.com/davemacdo/composer-diversity/blob/master/src/App.vue#L209

(I've never used Vue before, so this is just a guess)

[davemacdo]

Unfortunately, it's not quite that easy because the function that creates filterOptions has to wait for some data that doesn't exist before mounted.

However, I think I have figured out a workaround. Since the form is actually working even after throwing those errors, I realized that it is failing the first attempt, but then rerendering when filterOptions changes, so if I nest those v-for template tags inside of a v-if that checks to see if filterOptions is null, the errors go away and everything works as normal. Good idea!