How to define empty multidimensional array

Question

I need to use multidimensional array model in my vuejs project

Fiddle of my code:

I define an array in my vuejs data

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    arr: [[1,2],[3,4]]
  }
})

and use:

<p v-if="arr[3][0]">{{ arr[3][0] }} //Vue warn]: Error in render function: "TypeError: Cannot read property '1' of undefined"
</p>

but I have error when I call not defined index

Vue warn]: Error in render function: "TypeError: Cannot read property '1' of undefined"

I use v-if to skip undefined index but it doesn't work Fiddle

How can I solve this problem and skip not defined index?

UPDATE:

v-if not work correctly because of using it in <br> tag I changed <br> to <span> and problem solved

@taylorc93 I know that , I want to skip error for not defined index — Mohammad Fanni
– Mohammad Fanni, Commented Apr 29, 2017 at 12:44

Roy J · Accepted Answer · 2017-04-29 13:40:09Z

2

You need to test whether the top-level array element exists before testing whether the second-level array element exists.

<p v-if="arr[2] && arr[2][0]">

answered Apr 29, 2017 at 13:40

Roy J

44k10 gold badges84 silver badges106 bronze badges

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

2 Comments

I did check it on the fiddle, and it works fine. jsfiddle.net/50wL7mdz/30599

my problem was because of using if condition in br tag I replaced with span and solved