CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Robin
Robin

Reputation: 89

Using generic array name in template

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>

Upvotes: 1

Views: 74

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 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

Upvotes: 1

Related Questions