сращивание() неправильного компонента в массиве данных

#javascript #vue.js #vue-component

Вопрос:

Допустим, у меня есть форма, и я могу добавить или удалить столбец одним щелчком мыши.

Я использую v-for для визуализации компонентов vue, когда я splice() пытаюсь удалить определенный компонент, он всегда удаляет последний компонент в массиве.

Я не могу понять, что я здесь сделал не так, любой намек будет очень оценен.

Вот часть моего кода: проблема возникла в removePerson методе.

Родительский компонент

 <template>
<div class="form-container">
    <template>
        <div v-for="(child, key) in otherPersonArray" :key="key" class="form-container">
            <button @click="removePerson(key)" class="close">X</button>
            <component :is="child"></component>
        </div>
    </template>
    <button @click="addPerson" >  Add Person</button>
</div>
</template>

<script>
import otherPerson from './OtherPerson';

export default {
    components: {
        otherPerson
    },
    data() {
        return {
            otherPersonArray: [],
        }
    },
    methods: {
        addPerson() {
            if (this.otherPersonArray.length <= 10) {
                this.otherPersonArray.push(otherPerson);
            }
        },
        removePerson(key) {
            this.otherPersonArray.splice(key, 1);
        },
    },
}
</script>

Например, когда я пытаюсь удалить компонент, входное значение которого равно 1, он удаляет компонент, входное значение которого равно 2.

Компонент другого человека

 <template>
<div class="form-container">
    <div class="person">
        <div class="row">
            <div class="form-group col-6">
                <label for="inventor-last-name">Lastname of Person *</label>
                <div class="input-container">
                    <input v-model="lastName" type="text" class="form-control form-control-lg">
                </div>
            </div>
    </div>
</div>
</template>

<script>
export default {
    data() {
        return {
            lastName: '',
        }
    },
}
</script>

1. Можете ли вы console.log(ключ) в своей функции removePerson проверить, что вы получаете в ней?

2. Привет @SurjeetBhadauriya, я проверил console.log , что получил 0 , когда попытался удалить первый компонент, но он удалил второй…

3. @syltai не могли бы вы, пожалуйста, поместить свою структуру массива здесь, прежде чем удалять

4. Я не знаю, что означает структура массива, но массив будет: [otherPerson, otherPerson, otherPerson] , после трехкратного нажатия кнопки добавить. Компонент otherPerson is vue

5. @syltai Если вы получаете правильное значение индекса, то он должен удалить только соответствующее значение. Проверьте пример здесь stackblitz.com/edit/vue-5kvvd5?file=src/App.vue

Ответ №1:

Вы можете использовать Array.prototype.filter

 removePerson(key) { 
  this.otherPerson = this.otherPersonArray.filter((x, i) => i !== key);
}

Ответ №2:

есть несколько способов достичь этого, но пока вы можете попробовать следующие:

 removePerson(key) {
            this.otherPersonArray = this.otherPersonArray.filter(person => {
                 return person.key === key;
             })
        }

или

 const index = this.otherPersonArray.indexOf(ele by key); // get index by key person key
if (index > -1) {
  this.otherPersonArray.splice(index, 1);
}

То, что я понимаю, ключ-это индекс здесь, тогда вам следует следовать этому:

  var filtered = this.otherPersonArray.filter(function(value, index){ 
    return index !== key;
});

дайте мне знать, если это все еще не работает для вас?

Вот пример :

1. Привет @SandeepTiwari, я попробовал два из них, первый удалил все компоненты, второй все равно удалил последний компонент, когда я попытался удалить первый.

2. @sytai можете ли вы зарегистрировать предикат и посмотреть, что он возвращает, если нет, можете ли вы поделиться своим заполненным массивом здесь, я попробую это с моей стороны и дам вам знать, что происходит не так

3. Привет @SandeppTiwari, спасибо за третий код, я не уверен, что сделал что-то не так, он возвращается filtered is not defined .

4. @syltai, не могли бы вы дать мне свой заполненный массив?

5. Я нашел ошибку в своем коде, и я успешно использую третий код, он меняет otherPersonArray , но он все равно удалил последний вместо конкретного.