Question

我真的是vue.js和HTML的新手。我有两个组件正在一起工作。照相馆和标签组件。标签组件使用标签数组来获取图像的标签。我想要的是每个图像都有一个标签数组。我想我可以使用imageIndex并将其附加到数组名称上，这样我就可以像 :tags=tags+imageIndex 这样的字符串了。

但是，如果这样做，它将无法工作（我认为它不再被视为数组...）。我的问题是，是否有办法将其输入到模板中，以便为每个图像提供一个名称为 {tags{index} 的数组？

非常感谢您的帮助！

罗宾

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

Answer 1

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

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

并像这样定义它：

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

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

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

或具有该语法tags+index

的任何属性

在模板中使用通用数组名称

1 个答案: