时间戳

首页 > 解决方案 > Using generic array name in template

javascript - 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>

标签： javascriptvue.jsvuejs2vue-component

解决方案

您可以使用一种方法来实现：

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

并将其定义为：

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

通过假设您的数据对象中有类似的内容：

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

或任何具有该语法的属性tags+index

推荐阅读