#vue.js
#vue.js
Вопрос:
lt;templategt; lt;b-rowgt; lt;b-col md="3" v-for="item in defaultData" :key="item.key"gt; lt;b-form-groupgt; lt;b-form-file accept="image/*" placeholder="Choose popup invalid image..." drop-placeholder="Drop file here..." :name=item.keyName /gt; lt;/b-form-groupgt; lt;/b-colgt; lt;b-col md="2"gt; lt;a-button type="button" class="mr-2" html-type="submit" @click="addimg" gt;lt;i class="fa fa-plus" aria-hidden="true"gt;lt;/igt;lt;/a-buttongt; lt;/b-colgt; lt;/b-rowgt; lt;/templategt; lt;scriptgt; const defaultData = [ { keyName: product-a2, key: 1 } ] export default { methods: { addimg() { // } } } lt;/scriptgt;
Я загружаю изображения в vuejs.Но сейчас я сталкиваюсь с некоторыми нерешенными проблемами. Я хочу, чтобы при нажатии @click="addimg"
на него добавилось еще 1 поле для загрузки фотографий. Пожалуйста, выскажите мне свое мнение. Спасибо
Комментарии:
1. Вам нужно создать этот компонент и отрисовывать его
v-for
для каждого изображения. Кнопка » » добавит еще 1 элемент в массив, с которым вы используетеv-for
.
Ответ №1:
Просто используйте в своих методах this.defaultData.push({})
. Каждый раз, когда вы нажимаете на свой button
, он будет добавлять новый content
в ваш шаблон.
Я unique ID
также добавил, потому что я не знаю, является ли ваш «ключ» уникальным, и это поможет вам в будущем кодировании.
ОБРАТИТЕ внимание, что вы можете использовать свою кнопку b внутри v-for
, но она тоже всегда будет нажата.
Вот как вы должны изменить свой код:
lt;div v-for="item in defaultData" :key="item.id"gt; lt;!-- ALL OF YOUR DATA IN HERE --gt; lt;/divgt; lt;b-buttongt;lt;/b-buttongt;
methods: { addimg() { this.defaultData.push({ id: this.id = 1; }) } } data() { return { id: null, defaultData: [ //this is your first "defaultData" in your template { id: 0 } ] } }
Надеюсь, это вам поможет! Пожалуйста, дайте мне знать!
Комментарии:
1. Добро пожаловать! 🙂