ReSQL.ru
     
powered by simpleCommunicator - 2.0.48     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue js: удалить элемент из массива
12 сообщений из 12, страница 1 из 1
Vue js: удалить элемент из массива
    #39927366
Molasar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Molasar
Участник
Всем привет!

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

Код: 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, 11:54
| Ответить | Цитировать | Написать  
Vue js: удалить элемент из массива
    #39927447
SQLPowerUser
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
SQLPowerUser
Участник
Molasar,

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

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


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

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

ничего он не ломает.
...
Рейтинг: 0 / 0
02.03.2021, 20:14
| Ответить | Цитировать | Написать  
Vue js: удалить элемент из массива
    #40050030
voraa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
voraa
Гость
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:15
| Ответить | Цитировать | Написать  
Vue js: удалить элемент из массива
    #40050034
vb_sub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vb_sub
Участник
voraa,
ключ-идентификатор объекта. Как видишь в объектах массива они остались(свойство "id"). Другое дело, что теперь позиции в массиве после удаления соответствует другой объект. Автоматического перестроения массива после удаления элемента из коробки нет- только дополнительной реализацией- тот же самый map можно использовать, не пропуская в финальный массив удаленный элемент.
...
Рейтинг: 0 / 0
02.03.2021, 21:34
| Ответить | Цитировать | Написать  
Vue js: удалить элемент из массива
    #40050061
fkthat
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
fkthat
Участник
voraa
Еще как ломает

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

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

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

Какие-то фантазии. Возможно, что и вправду жаваскрипт мозг калечит.
...
Рейтинг: 0 / 0
03.03.2021, 11:21
| Ответить | Цитировать | Написать  
Vue js: удалить элемент из массива
    #40050202
vb_sub
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
vb_sub
Участник
fkthat,
просто в джаваскрипте уже реализованы квантовые алгоритмы- как пример тебе был продемонстрирован принцип суперпозиции, когда объект одновременно может находиться в двух состояниях-в частности удаленный элемент из массива одновременно и удален и существует в нем.
...
Рейтинг: 0 / 0
03.03.2021, 11:43
| Ответить | Цитировать | Написать  
12 сообщений из 12, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Vue js: удалить элемент из массива
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение
NoSQL.ru             Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&fpage=5&tid=1443291]:
 0ms
get settings:
 12ms
get forum list:
 13ms
check forum access:
 4ms
check topic access:
 4ms
track hit:
 37ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 49ms
get tp. blocked users:
 2ms
others: 237ms
total:  373ms
созд. / загр.: 373ms
x
x
Закрыть


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