v-bind:key в v-for error

123
03 сентября 2019, 23:20

У меня есть переменная file_url в которая может содержать любое количество адресов для загрузки файлов или не содержать вовсе. Я пытаюсь вывести все адреса при помощи v-for,но получаю ошибку.

<template>
    <div>
        <div id="load_file">
            <input type="file" @change="onFileChanged">
            <button @click="onUpload">Загрузить</button>
        </div>
        <div id="show_files">
            <div v-if="file_url">
                <ul>
                    <li v-for="url in file_url">
                        <a href={{url}} >Скачать файл</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>


<script>
    import Vue from "vue"
    import axios from 'axios'
    import Vuex from 'vuex'
    export default
    {
        data()
        {
            return
            {
                selectedFile: null
                file_url: false
            }
        },
        methods:
        {
            onFileChanged (event) {
                this.selectedFile = event.target.files[0]
                console.log("choose",this.selectedFile)
            },

            onUpload()
            {
                const formData = new FormData()
                formData.append("image",this.selectedFile, 
                  this.selectedFile.name)
                formData.append("userImages",1)
                axios.post("http://127",formData)
                .then(response => {
                    if(response)
                    {
                    console.log("файл отправлен,ответ -  ",response)
                    }       })
            },
        },
        created() {
                if (process.client) {
                    if(this.$cookies.get('token'))
                    {
                        if(!this.$store.getters.USER_DATA)
                        {
                          this.$store.dispatch("LOGIN_ACTION_UPDATE")
                        }
                        this.file_url = 
                         this.$store.getters.USER_DATA.file_url
                    }
            }
        },
    }
</script>

Буду благодарен за любую помощь,подсказки и замечания.

Answer 1

Нужно добавить атрибут key:

v-for="(url, index) in file_url" :key="index"

А атрибут href необходимо завебайндить и передавать в него переменную без интерполяции

READ ALSO
HTML: абсолютные и относительные ссылки

HTML: абсолютные и относительные ссылки

В своей html'ке подключаю JS по абсолютной ссылке <script src="htttp://sitecom/js

121
Кривая граница блока

Кривая граница блока

Подскажите пожалуйста, как лучше выполнить такую верхнюю границу блока с элементами на ней? canvas? Если возможно, пример какой-то хотьЗаранее...

119
Перемещение и растворение блока

Перемещение и растворение блока

Как сделать, чтобы при нажатии на кнопку блок начал плавно перемещаться вправо и одновременно как бы растворяясь исчезнул?

158
Идентификатор или сложный селектор

Идентификатор или сложный селектор

Предположим есть элемент header расположенный непосредственно в body и являющийся шапкой сайтаВ CSS можно обращаться к нему как body > header, в то же время...

106