Vuejs v-bind v-for not populating into component template

Question

with html

  <div id="app">
    <gallery v-bind:links="['link1.jpg', 'link2.jpg']" />
  </div>

and component definition:

    Vue.component('gallery', {
      template: `
        <div v-if="!isReady">
        not ready
        </div>
        <div v-else>
          <image-grp v-for="src in links">
            <img v-bind:src="src">
          </image-grp>
        </div>
      `,
      data() {
        return {
          links: [],
          isReady: false
        }
      },
      mounted() {
        this.links = this.$el.getAttribute('links').split(',')
        this.isReady = true
        console.log(this.links);
      }
    });

I've managed to produce this html:

<div links="link1.jpg,link2.jpg">
  <div class="image">
    <img src="">
  </div>
  <div class="image">
    <img src="">
  </div>
</div>

The images are not showing up because of the empty src. The src should be filled in during the loop on src in links. The array links must be filled properly, cause the html shows the same number of image-grp elements as are in the links array.

I have tried a variety of ways to populate/bind/mustache the src into the dynamic <img src=""> elements. Any guidance would be appreciated.

Tolbxela · Accepted Answer · 2023-02-09 23:16:49Z

1

I don't see any problems with your code. It works.

But you should better make links to props, like this:

props: ['links']

Then, the other commented out lines are not needed.

Playground

Vue.component('gallery', {
  props: ['links'],
  template: `
    <div v-if="!isReady">
    not ready
    </div>
    <div v-else>
      <image-grp v-for="src in links">
        <img v-bind:src="src">
      </image-grp>
    </div>
  `,
  data() {
    return {
      //links: [],
      isReady: false
    }
  },
  mounted() {
    //this.links = this.$el.getAttribute('links').split(',');
    this.isReady = true;
  }
});

const app = new Vue({
    el: '#app'
})

img {
  width: 100px;
  height: 100px;
  margin: 4px;
}

<div id="app">
   <gallery v-bind:links="['https://i.sstatic.net/NxnaT.jpg?s=256&g=1', 'https://www.gravatar.com/avatar/50309120892edf29dcb2188bdabe3b08?s=256&d=identicon&r=PG']"></gallery>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>

edited Feb 9, 2023 at 23:16

answered Feb 9, 2023 at 23:10

Tolbxela

5,2193 gold badges23 silver badges52 bronze badges

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

3 Comments

WEBjuju Over a year ago

awesome. can you point to something that explains (or explain) better make links to props? is it just a best practice? or is that why it wouldn't work until i changed image-grp to div?

WEBjuju Over a year ago

OH...props then solves my issue with needing to split the csv! got it, ty.

Tolbxela Over a year ago

props are standard and it's simpler to do in your case. In general props offers much more then attributes, like type checking and default values. Check the docs about it.

Collectives™ on Stack Overflow

Vuejs v-bind v-for not populating into component template

1 Answer 1

Playground

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Playground

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related