Гость
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue js: удалить элемент из массива / 12 сообщений из 12, страница 1 из 1
17.02.2020, 11:54
    #39927366
Molasar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
Всем привет!

В данном примере не удаляется соответствующий элемент массива. При нажатии на кнопку ничего не происходит.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
<!DOCTYPE html>
<html>

<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
    <div id="app1">
        <div v-for="(product, index) in products" :key="product.id">
            {{index}}. {{ product.name }} - {{product.amount}}
            <button @click="deleteProduct(index)">delete</button>
        </div>
    </div>
    <script>
        var app1 = new Vue({
            el: "#app1",

            data: {
                products: [
                    {name: "Milk", amount: "200"},
                    {name: "Cheese", amount: "100"},
                    {name: "Bread", amount: "150"}
                ]
            },

            methods: {
                deleteProduct: function(index) {
                    this.products.slice(index, 1);
                }
            }
        })
    </script>
</body>

</html>
...
Рейтинг: 0 / 0
17.02.2020, 13:28
    #39927447
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
Molasar,

не slice, а s p lice   Сейчас проверил, так работает:
Код: javascript
1.
this.products.splice(index,1);
...
Рейтинг: 0 / 0
17.02.2020, 13:36
    #39927457
Molasar
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
SQLPowerUser
Molasar,

не slice, а s p lice   Сейчас проверил, так работает:
Код: javascript
1.
this.products.splice(index,1);


Спасибо. Тоже только, что обнаружил описку))
...
Рейтинг: 0 / 0
Период между сообщениями больше года.
01.03.2021, 22:42
    #40049715
didgik
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
А как удалить элемент массива, если ключи числовые? splice не подходит, он ключи ломает.
...
Рейтинг: 0 / 0
02.03.2021, 18:36
    #40049965
SQLPowerUser
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
didgik,

дайте пример массива, и какой элемент надо удалить
...
Рейтинг: 0 / 0
02.03.2021, 20:14
    #40050014
vb_sub
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
didgik
А как удалить элемент массива, если ключи числовые? splice не подходит, он ключи ломает.

ничего он не ломает.
...
Рейтинг: 0 / 0
02.03.2021, 21:15
    #40050030
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
vb_sub
didgik
А как удалить элемент массива, если ключи числовые? splice не подходит, он ключи ломает.

ничего он не ломает.

Еще как ломает

Код: javascript
1.
2.
3.
4.
let arr = [ {id:0, name:'aaa'},{id:1, name:'bbb'},{id:2, name:'ccc'},{id:3, name:'ddd'},{id:4, name:'eee'},{id:5, name:'fff'} ];
console.log (arr[3]);  // => {id:3, name:'ddd'}
arr.splice(2,1);
console.log (arr[3]);  // => {id:4, name:'eee'}



Что бы удалить, не ломая, (например, элемент с индексом 2) либо
arr[2] = undefined;
либо
delete arr[2];

Разница не очень велика (ну forEach по-разному обработает это), но первый способ предпочтительнее, т.к. не оставляет дырки в массиве. А дырявые массивы хуже оптимизируются.
...
Рейтинг: 0 / 0
02.03.2021, 21:34
    #40050034
vb_sub
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
voraa,
ключ-идентификатор объекта. Как видишь в объектах массива они остались(свойство "id"). Другое дело, что теперь позиции в массиве после удаления соответствует другой объект. Автоматического перестроения массива после удаления элемента из коробки нет- только дополнительной реализацией- тот же самый map можно использовать, не пропуская в финальный массив удаленный элемент.
...
Рейтинг: 0 / 0
02.03.2021, 23:38
    #40050061
fkthat
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
voraa
Еще как ломает

И что же он "ломает"? После splice arr[3] будет то, что сначала было arr[4], так что все правильно.
...
Рейтинг: 0 / 0
03.03.2021, 10:01
    #40050139
voraa
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
fkthat
voraa
Еще как ломает

, так что все правильно.

С точки зрения индекса массива и логики работы splice, может и все правильно. Но речь идет о "ключе". Если рассматривать индекс, как первичный ключ, то так быть не должно. Ключ должен указывать на туже самую запись, на которую указывал, независимо от того, удалялись записи или добавлялись.
...
Рейтинг: 0 / 0
03.03.2021, 11:21
    #40050185
fkthat
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
voraa
Если рассматривать индекс, как первичный ключ, то так быть не должно. Ключ должен указывать на туже самую запись, на которую указывал, независимо от того, удалялись записи или добавлялись.

Какие-то фантазии. Возможно, что и вправду жаваскрипт мозг калечит.
...
Рейтинг: 0 / 0
03.03.2021, 11:43
    #40050202
vb_sub
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Vue js: удалить элемент из массива
fkthat,
просто в джаваскрипте уже реализованы квантовые алгоритмы- как пример тебе был продемонстрирован принцип суперпозиции, когда объект одновременно может находиться в двух состояниях-в частности удаленный элемент из массива одновременно и удален и существует в нем.
...
Рейтинг: 0 / 0
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue js: удалить элемент из массива / 12 сообщений из 12, страница 1 из 1
Целевая тема:
Создать новую тему:
Автор:
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]