Using generic array name in template

Question

I am really new to vue.js and HTML. I have two components that are working together. A photo-gallery and a tag-component. The tag-component uses the tags array to get the tags for a image. What i would like is to have a tag array for each image. I figured i could use the imageIndex and append that to the array name so I was string something like :tags=tags+imageIndex.

But if I do that, it does not work (i think it is not recognized as an array any more...) . My question is, is there a way to enter that in to the template, so that i have for each image an array with the name tags{index}?

Many thanks for the help!

Robin

<div id="SingleFile">
    <button
            id="refreshbtn"
            class="btn btn-primary btn-margin"
            @click="updateFileList">
        refresh
    </button>

    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div
            :key="imageIndex"
            :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
            @click="index = imageIndex"
            class="image"
            v-for="(image, imageIndex) in images"

    >
        <div>
        <vue-tags-input
                v-model="tag"
                :tags="tags"
                @tags-changed="newTags => tags = newTags"
        />
        </div>
    </div>
<div class="upload">
    <upload-image url="http://localhost:8080/user" name="files" max_files="100"></upload-image>
</div>
</div>

Boussadjra Brahim · Accepted Answer · 2019-01-13 14:55:20Z

1

You could use a method to achieve that:

     <vue-tags-input
            v-model="tag"
            :tags="getTags(imageIndex)"  ... >

and define it like :

  methods:{
      getTags(i){
       return this['tags'+i];
       }
    }

by assuming that you have in your data object something like :

   data(){
      return{
          tags0:[],
          tags1:[],
          ...
        }
  }

or any property which has that syntax tags+index

answered Jan 13, 2019 at 14:55

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

1 Comment

Robin Over a year ago

thanks so much! It works exactly like i need it! In the method i will make the api calls and give back the arrays directly

Collectives™ on Stack Overflow

Using generic array name in template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related