I am working on a Vue.js project and need to implement a multidimensional array model
Here is a Fiddle with my code:
In my Vue.js data, I have defined an array like this:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
arr: [[1,2],[3,4]]
}
})
However, when I try to access an undefined index using the following code, I encounter an error:
<p v-if="arr[3][0]">{{ arr[3][0] }} //Vue warn]: Error in render function: "TypeError: Cannot read property '1' of undefined"
</p>
The error message states: "Vue warn]: Error in render function: "TypeError: Cannot read property '1' of undefined"
Even though I tried to use v-if to skip undefined indexes, it did not work as expected. You can view the updated Fiddle here.
How can I resolve this issue and properly handle not defined indexes?
UPDATE:
After realizing that the issue was due to using v-if within a <br> tag, I replaced it with a <span> tag and successfully resolved the problem.