Блог

 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 поле для загрузки фотографий. Пожалуйста, выскажите мне свое мнение. Спасибо

Просто используйте в своих методах 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 }   ]  } }  

Надеюсь, это вам поможет! Пожалуйста, дайте мне знать!