Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 10.11.2022, 20:37
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

рони, изменения массива this.children сами по себе запускают ререндер, этож vue. Если ты имеешь ввиду изменения в содержимом v-slot, то в задаче этого не стояло, но в принципе можно по beforeUpdate добавить алгоритм сопоставления позиций убирая отсутствующие и добавляя новые в конец, например.

voraa, есть множество способов сделать эту задачу на Vue красиво и аккуратно, просто делать её надо изначально на vue.
Выглядеть будет это например так:
<div id="app">
   <v-line v-for="content in data" @up="up" @down="down">{{content}}</v-line>
</div>

Без всякого шаманства.

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

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

То что ты тут видишь - это advanced техники в основном для узких специфических задач авторов плагинов\библиотек. Так что не надо оскорблять божественный Vue.)

P.S. Хотя вот тот же Angular - там да, много ереси.
__________________
29375, 35

Последний раз редактировалось Aetae, 10.11.2022 в 20:41.
Ответить с цитированием
  #12 (permalink)  
Старый 10.11.2022, 21:27
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от Aetae
изменения массива this.children сами по себе запускают ререндер,
мои изменения не входят в список
pop: ƒ mutator()
push: ƒ mutator()
reverse: ƒ mutator()
shift: ƒ mutator()
sort: ƒ mutator()
splice: ƒ mutator()
unshift: ƒ mutator()
что делает mutator я не осилил.
мне бы в ручную рендер запустить, я синтаксиса не знаю.
могу конечно достичь нужного запуском без аргументов this.children.splice();
но наверняка есть что-то типа this.render();
Ответить с цитированием
  #13 (permalink)  
Старый 10.11.2022, 22:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Aetae,
так сработало this.$forceUpdate();
может есть ещё варианты для такого this.children[0] = {}; или в Vue так не делают?
Ответить с цитированием
  #14 (permalink)  
Старый 10.11.2022, 22:34
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

рони,
Vue.set(this.children, 0, {});
// или
this.$set(this.children, 0, {});

В vue 3 с этим вопрос решён(используется Proxy), там можно напрямую, но тут мы говорили о Vue 2.)

Собсно к реактивному отлову изменений массива по прямому присвоению до прокси было только два варианта:
1. В vue 2 отказались от этого в пользу splice и Vue.set, описав в документации, зато массив - всё ещё тот же самый массив, работают все методы массива, проверки на массив, сравнение === и.т.д.
2. В mobx сделали объект - обёртку над массивом, реактивно работает присвоение по номеру, но массив уже не массив и по === не сравнить, в функции ожидающие массив с гарантией не передашь и т.д. Требуется явно вызывать .toArray.
__________________
29375, 35

Последний раз редактировалось Aetae, 10.11.2022 в 22:42.
Ответить с цитированием
  #15 (permalink)  
Старый 10.11.2022, 22:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Aetae,
Ответить с цитированием
  #16 (permalink)  
Старый 11.11.2022, 17:51
Аватар для ANAGAMA
Аспирант
Отправить личное сообщение для ANAGAMA Посмотреть профиль Найти все сообщения от ANAGAMA
 
Регистрация: 29.05.2013
Сообщений: 49

Сообщение от voraa Посмотреть сообщение
Вот чем мне не нравятся все фрейворки, так это тем, что простейшие вещи (почесать левое ухо) надо делать хрен знает как (правой ногой через спину)
ААААААА........... порвало. Да, есть такой момент. Вроде вот оно, вот ну, рядом ЖЕЖ.. а нет...... ))
Ответить с цитированием
  #17 (permalink)  
Старый 12.11.2022, 12:04
Аватар для ANAGAMA
Аспирант
Отправить личное сообщение для ANAGAMA Посмотреть профиль Найти все сообщения от ANAGAMA
 
Регистрация: 29.05.2013
Сообщений: 49

Сообщение от Aetae Посмотреть сообщение
<div id="app">
   <v-line v-for="content in data" @up="up" @down="down">{{content}}</v-line>
</div>
Все так. Вопрос. Откуда ВУ. возьмет {{content}}?

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

А со страницы как ему данные отправить? Какойнить приличный массивчик.

Эдак 100 записей, каждая из которых маленькая картинка и с десяток полей?

А никак.

Можно упаковать эти данные пярмо в компоненты, но потом их не перетасуешь......
Ответить с цитированием
  #18 (permalink)  
Старый 12.11.2022, 14:19
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,480

ANAGAMA, что значит "никак", лол.
Весь современный веб так и работает. API на сервере отдаёт массив вида
[{
  img: 'http://...',
  title: 'text',
  content: 'text'
}, {...}]
а фронт это дело рисует.
__________________
29375, 35
Ответить с цитированием
  #19 (permalink)  
Старый 14.11.2022, 10:12
Аватар для micscr
Профессор
Отправить личное сообщение для micscr Посмотреть профиль Найти все сообщения от micscr
 
Регистрация: 10.09.2009
Сообщений: 1,566

Сообщение от ANAGAMA Посмотреть сообщение
А со страницы как ему данные отправить? Какойнить приличный массивчик.
Можно в коде сформировать свои данные в виде js, и потом передать их vue

<div id="app">
	<ul>
	    <li v-for="el in myarr">{{el.name}} - <span v-html="el.content"></span></li>
	</ul>
	
</div>



</body>
<script>
const myarr = [{name:'one', content:'<strong>one</strong>'}, {name:'two', content:'<strong>two</strong>'}, {name:'three', content:'<strong>three</strong>'}];

const vm = new Vue({
	el: "#app",
	data: {
		myarr 
		
	},


});

</script>
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Vue 2 и router 4 torsar Библиотеки/Тулкиты/Фреймворки 1 04.06.2022 23:43
что такое defineComponent (vue cli) fori Javascript под браузер 1 22.03.2021 20:46
Локальное подключение компонентов vue? Lodas Библиотеки/Тулкиты/Фреймворки 0 11.04.2020 22:42
Vue + Axios + PHP + MySQL Volun Библиотеки/Тулкиты/Фреймворки 13 03.04.2019 18:50
UI верстальщик. VUE + Semantic UI shelomar Работа 0 12.01.2018 15:40