dicem

Передавать надо geojson, а не координаты

-features: coordinates2,
+features: points,

Возможно приходит \n в виде двух символов, слеша и буквы n. Тогда split("\\n").join("\n"), ну или replaceAll, если угодно.

Vue 2 не даёт использовать произвольный код в шаблонах, там код компилируется вместе с самим шаблоном отдельно от всей твоей системы сборки.

В теории можно подсунуть свои обработчики в компилятор, но на практике когда до этого дошло и я начал рыть в эту сторону - появился vue 3 и я забил. Можешь порыть и забить и ты.:)

В любом случае тайпкасты в шаблоне - моветон, пофикси изначальные типы и всё будет нормально. Ну или по-хардокору можно отрубить тайпчек в шаблонах в IDE.:)

Использование методов\функций в шаблоне - тоже весьма плохо, и так делать крайне на рекомендуется: подготовь все данные в compunted и отдавай в шаблон только чистые и удобные для него(шаблона) данные.
Если это сделать кажется сложно, то с большой вероятностью вы неправильно используете vue: в vue надо разбивать всё на минимальные компоненты(пусть даже в пяток строк), вот и тут разбейте на подкомпоненты и всё снова станет просто и приятно.

А на богомерзкий jsx не переходи, а то те, кто после тебя проект продолжит, могут тебе и глаз подбить.:)

Ну может просто Inverify будет излишним во Vue3?

Суть инверсии управления (Inversion Of Control, IoC) заключается в том, что класс передает контроль (читай: ответственность) за создание зависимых экземпляров, которые нужны классу, контейнеру, который вместо этого предоставит им эти экземпляры. Одной из реализаций инверсии управления в применении к управлению зависимостями является внедрение зависимостей (Dependency Injection, DI). Inverify реализует инверсию управления и, из того, что я видел и трогал, изредка использовался с Vue2 через Class API (который реализуется сторонними библиотеками). Там использование подобного подхода оправдано тем, что с инкапсуляцией частей логики, шарингом кода и менеджментом состояний все непросто, так как нехватает адекватных механизмов для этого. Эти проблемы в свое время привели к старту разработки принципиально нового фреймворка под названием... Vue3) В процессе рассматривали Class API и Composition API, Composition API победил и вошел в релиз, а Option API достался нам по историческим причинам (ну нельзя так просто взять и заявить, что половину опыта разработчикам стоит выкинуть в мусорное ведро).

Итак, у нас есть Vue3 и Composition API. Без классов. Только setup-функция и useЧтоТоТам кусочки логики. Что мы имеем с этого? Мы можем вынести определенную часть логики в use-функцию. Внутри use-функции может происходить что угодно - мы импортируем только результат в виде ref-ов и функций (назовем их actions-функции). То есть use-функция отвечает за создание зависимых экземпляров, которые нужны компоненту, то есть выполняет функцию DI. Также use-функция может использовать другие use-функции. Все это значительно расширяет возможности декомпозиции, повторного использования кода, и уменьшает зацепление, для чего Inverify и предназначается. Пожалуй, единственный кейс, который мне с ходу удалось придумать для использования Inverify с Vue3 - это когда мы знаем, что будем использовать нашу логику в различных приложениях и средах с различными библиотеками рендеринга (Vue3, React, и т.п.). Но для каждого приложения в отдельности это будет дороже, поэтому стоит дважды подумать, стоит ли игра свеч и нет ли более простых путей.

Что касается стейт-менеджмента, то Composition API тут тоже самодостаточен, когда приложение небольшое и рендерится на клиенте. Достаточно использовать замыкание и глобальный стейт готов. Pinia помогает с SSR и отображением состояния в дев-тулзах, библиотека удобна для более крупных проектов. При написании сторов внутри все пишется точно так же, как если бы использовался голый Composition API, да и в приложении используется практически так же (за исключением использования нескольких встроенных методов). Поэтому простенькое MVP-приложение очень просто перевести со сторов на use-функциях на использование Pinia. Vuex сейчас смысла особого использовать не вижу, теряется удобство и консистентность использования.

В разговоре о DI нельзя также не упомянуть https://vuejs.org/guide/components/provide-inject.html. Его можно использовать при разработке декларативных библиотек компонентов, но это такая штука, которая может неочевидно выстрелить в ногу, использовать следует с осторожностью.

Итого, на мой взгляд, использование Inverify с Vue3 избыточно и усложняет написание кода. Грамотное использование Composition API, Pinia (при необходимости), декларирование интерфейсов (если используется TS) и соблюдение принципа инверсии зависимостей решает все эти проблемы.

Отправку данных делаете так:

Замените только ссылку на php-обработчик на свой. Далее, принимать данные отправленные, как JSON надо по другому. Пример получения данных отправленных, как JSON:

const pick = (obj, keys) => Object.fromEntries(keys.map(k => [ k, obj[k] ]));

const newArr = arr.map(n => pick(n, keys));

Если в элементах arr присутствуют не все keys, и в элементах результирующего массива изначально отсутствующие появиться не должны, тогда

const pick = (obj, keys) =>
  Object.fromEntries(Object.entries(obj).filter(m => keys.includes(m[0])));

// или

const pick = (obj, keys) =>
  keys.reduce((acc, n) => (obj.hasOwnProperty(n) && (acc[n] = obj[n]), acc), {});

Обновил ответ, старая реализация была с багом.

function diff(a1, a2) {
    return a1.filter(i=>a2.indexOf(i)<0)
    .concat(a2.filter(i=>a1.indexOf(i)<0))
}
function compare(a1, a2) {
    return a1.length == a2.length && a1.every((v,i)=>v === a2[i])
}

jsfiddle.net/Stalk/7h5ahq5k/2

upd: в ES7 (2016) появился метод includes

const diff = function(a1, a2) {
    return a1.filter(i=>!a2.includes(i))
    .concat(a2.filter(i=>!a1.includes(i)))
}

https://jsfiddle.net/Stalk/7h5ahq5k/9/

Полагаю, что приведение парсится криво (особенно если в этом же файле есть темплейт).

Предлагаю переписать так:
(this.$refs.fileInput as HTMLElement).click()

Если состояние такое:

$ git status

On branch master
Changes not staged for commit:
  (use "git add/rm <file>..." to update what will be committed)
  (use "git checkout -- <file>..." to discard changes in working directory)

	deleted:    myfile

То файл можно восстановить вот так:

git checkout myfile

Чтобы восстановить файл из конкретного коммита или ветки, можно сделать вот так:

git checkout abcde myfile # abcde — хеш коммита
# или
git checkout feature3 myfile # feature3 — имя ветки

Property 'scrollTo' does not exist on type 'Vue | Element | Vue[] | Element[]'

Ну так всё же написано )) Тип рефа Vue | Element | Vue[] | Element[]
Если точно знаете что это за элемент, то попробуйте так:
(this.$refs.list as HTMLDivElement).scrollTo(0, 0)

значения параметров http get, т.е. твой username, должны быть кодированы с помощью encodeURI

Делал через axios и общий обработчик, в случае не рабочего токена, отправлял ошибку вида 405 (для примера). На фронте, на эту ошибку ставил действия отправки refresh token, если он ошибочный выкидывал из системы. Если ок, то обновлял access token и делал запрос снова.

https://axios.nuxtjs.org/extend

Наконец таки я решил все технические вопросы для внедрения Vue.js в WordPress-Workflow. Долго я к этому шёл. Трудно было совместить freelancing на основе WordPress и WooCommerce и одновременно самообучение Symfony и Vue.js и создание первых реальных проектов на их основе. Но создание первого большого проекта на основе headless Symfony 4 (JSON API) и потребителя на основе Vue.js меня хорошо продвинуло вперед в направлении внедрения Vue.js в WordPress. Почему мне так интересен WordPress/WooCommerce умея делать Backend на основе Symfony? Потому что WordPress делает доступным веб технологии и маленьким клиентам по "демократическим" ценам, при этом всё ещё позволяя фрилансеру хорошо заработать (по крайней мере в Берлине, где я проживаю).

Так как путь сюда до сих пор никем в интернете детально не описан и я угрохал недели если не месяцы на решение этой задачи прочитывая все статьи и docs с этой темой связанные (освоил для этого даже наконец таки Docker и Nginx и углубил знания в настройке Webpack) и пройдя многие не верные пути (vue-cli, nuxt.js) - я решил создать в течении следующих недель курс на Udemy.com на английском за 20 баксов. Если будет тут достаточно интереса (хотя бы лайков 10 ), то сделаю туториал и на русском. Курс будет содержать настройки Webpack, Docker (optional), Apache/Nginx. Моё решение сохраняет в отличии от nuxt.js все преимущества как WordPress так и Vue.js при этом соблюдая "законы" SEO и Social Marketing (Twitter Cards, Facebook Open Graph итп) и самое главное Hot Module Replacement с PHP/WordPress Templates!!!!!! .
Я очень разочарован Nuxt.js и расскажу в Tutorial почему он далеко не во всех случаях технически годен и почему с точки зрения open source этот проект не оптимальный исходя из моего личного опыта.

UPDATE 15.05.2019
К сожалению руки до туториала так и не дошли. Но создал Github Repo с простым Starter Theme.
Демо можно тут просмотреть: wue-theme.app
Пока без доскональной документации. Надеюсь к концу месяца создам.
Приколы темы:
-Hot Module Replacement с PHP файлами (если только это интересно можно и тут скачать Webpack config)
-полная поддержка SEO без Server Side Rendering (SSR). Реализуется это за счёт загрузки данных вместе с HTML в глобальном JS объекте "technomad", вместо дополнительного AJAX-запроса, что не поддерживается гуглом и для чего и нужны все прибамбасы типа Nuxt.js и phpv8/v8js.
-элементы меню и новости автоматически добавляются через WordPress-Backend.
-тема устонавливается как и любая другая тема без каких либо дополнительных настроек сервера (нужно скачать всю Repository и скомпремировать "wuetheme" папку в ZIP и тогда можно просто загружать как и обычную тему).
-Github Repo без данных из демонстрации. Может ещё добавлю функцию установки демо данных.
-сервер демо во Франкфурте без CDN. Так что во Владивостоке загрузка наверное немного дольше длится будет)) Из Берлина за 600-700ms загружается с VPS.
-есть ещё много над чем работать (pagination, проверка загруженны ли скрипты и стили плагинов при Ajax route change, пока они загружаются только при инициальной загрузки, но скрипты и стили могут быть на каждой странице иные) , нo даже в данном виде эта тема на сколько я знаю уникальная.
-тут можно проследить прогресс перестройки моего сайта с этой темой: stage.alexfullstack.dev, там больше клёвых анимаций))
Пока всё. Have fun :)

Update 30.05.2019
Много чего обновил на Github.

Update 02.06.2019
Я решил вчерашнюю проблему)))
Нужно было просто выспаться))
Завтра подробно опишу и обновлю Github Repo.

Update 03.06.2019
-загрузил на Github новую "bulletproof SEO" версию с "Dynamic Rendering Implementation"
-подробная статья тут

Update 14.06.2019
Перенёс сайт на wue-theme.app.
Демонстрация Github версии тут: starter.wue-theme.app
Добавил простую Load More Pagination и очистил код.

Плагины ролей.
ищи wordpress roles and capabilities plugin

data: () => ({
  focused: false,
}),

<input @focus="focused = true" @blur="focused = false">
<span v-show="focused">FOCUSED</span>

https://jsfiddle.net/mc69wnwu/

Попробуйте подключать скрипт Яндекса в момент инициализации компонента. А метод yaMapInit запускать уже после того как этот скрипт загрузится.

Дополнительно стоит предусмотреть удаление скрипта, при удалении компонента.

Пример:

created() { // или даже beforeCreated()
  const script = document.createElement('script')
  
  script.onload = () => {
    ymaps.ready(() => this.yaMapInit());
    // или
    // this.yaMapInit()
  };
  
  script.id = 'ymaps'
  script.src = "https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU"
  document.head.append(script);
},

destroyed() {
	document.head.querySelector('script#ymaps').remove()
  // ymaps = null
}

https://www.google.com/search?q=awesome+swiper&oq=...