0

I have a vue componenet where I want to render out a multidimensional array, but when I set up the v-for the div doesn't render at all and doesn't throw any errors. I put a console.log output in the computed method and that returns the multidimensional array that I am trying to display on the page, but the v-for won't render it. Also, right before the v-for I try to render an item from the array and it works fine, it just doesn't render the v-for div. Do y'all know why it isn't rendering?

Here is the template

<div>
    this is a test
    {{ assets['Article'][0].assetTitle }}
    <div class="assets" v-for="(assetArray, assetCategory) in assets" v-bind:key="assetCategory">
      test
      <h4>{{ assetCategory }}</h4>
    </div>
  </div>

Here is my computed:

computed: {
      ...mapGetters([
         'getAssetSubArrays'
      ]),
      assets () {
          let test = this.$store.getters.getAssetSubArrays(this.flyoutLayer)
          console.log(test)
          console.log('test')
          return test
      }
  },

And here is the array returned by console.log(test) enter image description here

2
  • 1
    Is that an array with non-numeric properties? You may need to change it to a normal object, so {} instead of []. Commented Oct 14, 2019 at 15:18
  • Is getAssetSubArrays asynchronous? Commented Oct 14, 2019 at 15:19

1 Answer 1

1

@skirtle gave the right answer in the comments. I had initiated the array as an array = [], and as soon as I switched it to array = {} it worked. Thanks Skirtle!

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

1 Comment

Were you doing SSR?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.