Vuejs удалить строку динамически с выбранным изображением - PullRequest
Новая
       0

Vuejs удалить строку динамически с выбранным изображением

0 голосов
/ 21 октября 2019

Я следовал ответу ниже, чтобы динамически работать с добавлением строки. Это ссылка

Все в порядке, пока я не хотел динамически удалять строки. Я использовал сращивание для удаления строки, но моя проблема в том, что изображения, которые я выбрал для каждой строки, испортились после удаления выбранной строки.

На изображениях ниже можно различить.

Итак, как вы можете видеть, изображения, которые я выбрал для этих строк: 1, 2 и 3.

enter image description here

Теперь яудалите вторую строку с именем изображения 2.

enter image description here

Мой ожидаемый результат - файл должен быть 3, так как я удалил 2-ую строку. 2-й ряд удаляется, но метка изображения остается прежней.

Это мой код. 

<div
   class="row"
   style="margin-bottom: 10px;"
   v-for="(item, index) in form.rowData"
   :key="index"
>
    <div class="col-md-3">
       <div class="form-group">
          <label for="inputSelect" class="col-lg-3">Amount</label>
          <div class="col-lg-8">
             <div class="bs-component">
                <input
                      v-model="form.rowData[index].amount"
                      type="number"
                      step="0.01"
                      id="inputStandard"
                      class="form-control"
                 />
             </div>
          </div>
        </div>
     </div>
     <div class="col-md-4">
        <div class="form-group">
          <label for="inputSelect" class="col-lg-3">Image</label>
          <div class="col-lg-8">
            <div>
               <input
                  v-if="uploadReady"
                  type="file"
                  :name="index"
                  accept="image/*"
                  @change="onFileChange"
                />
              </div>
            </div>
          </div>
       </div>
       <div class="col-md-1">
         <div v-if="index == form.rowData.length -1">
           <a @click="addItem">
             <span style="font-size:30px;" class="fa fa-plus-circle" />
            </a>
          </div>
          <div v-else>
           <a @click="removeItem(index)">
                  <span style="font-size:30px; color: red;" class="fa fa-times-circle" />
            </a>
          </div>
       </div>
</div>

methods: {
    addItem() {
        var my_object = {
        amount: "",
        image: ""
       };
       this.form.rowData.push(my_object);
    },
    removeItem(index) {
      this.form.rowData.splice(index, 1); 
    },
}

Кто-нибудь может помочь с этой проблемой? Я использую vueJs и использовал splice для удаления элемента в rowData.

Ответы [ 3 ]

0 голосов
/ 21 октября 2019

Чтобы убедиться, что vue.js знает не только о позиции, но и о фактическом элементе списка, вы должны привязать уникальный ключ к вашему списку, например v-for="item in items" :key="item"

Использование индекса в качестве ключа может бытьсложно. Лучший способ сделать это, используя настоящий уникальный ключ. Если вы уверены, что item будет уникальным, вы можете использовать его.

0 голосов
/ 21 октября 2019

при работе со списком я бы предложил создать пользовательский класс для коллекции и элемента коллекции, затем вы можете связать непосредственно с этими классами из шаблона.

Примерно так: 

class FileItem {
    constructor() {
        this.title = "";
    }
}

class FileCollection {
    constructor() {
        this.items = [];
    }

    add(item) {
        this.items.push(item);
    }

    addNew() {
        this.add(new FileItem());
    }

    remove(item) {
        var index = this.items.indexOf(item);
        if (index > -1) {
            this.items.splice(index, 1);
        }
    }
}

new Vue({
    el: '#app',
    data() {
        return {
            fileCollection: new FileCollection()
        }
    }
})

Тогдав шаблоне вы можете использовать его как: 

<button @click="fileCollection.addNew"></button>

<table>
    <body>
        <tr v-for="item in fileCollection.items">
            <td>{{ item.title}}</td>
            <td>
                <v-btn @click="fileCollection.remove(item)">Remove</v-btn>
            </td>
        </tr>
    </body>
</table>

Также внутри класса коллекции вы можете контролировать, как генерировать идентификатор для свойства ключа элемента.

0 голосов
/ 21 октября 2019

Добавьте в свой цикл v-for индекс.

Пример: 

<div v-for="(value,index) from data" :key="index">
   <button @click="deleteRow(index)">DELETE</button>
</div>


methods: {
    deleterRow(index){
      this.data.splice(index,1)
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...