Как внутри v-on = «...» получить глобальный контекст?

Question

[Николай Чуприк]

Вот примерно, что мне надо:

@click = "myVueMeth1(); myVueMeth2(); document.forms[0].submit()"

Но это не работает. Понимаю, что можно так:

onclick = "vm.myVueMeth1(); vm.myVueMeth2(); document.forms[0].submit()"

где vm — объект Vue

Но хочется чистоты стиля.

Answer 1

[0xD34F]

Сделайте отдельный метод:

@click="onClick"

methods: {
  onClick() {
    this.myVueMeth1();
    this.myVueMeth2();
    document.forms[0].submit();
  },
},

UPD. Конечно, вы можете определить computed свойство для document, типа так:

computed: {
  document() {
    return document;
  },
},

Тогда ваш первый пример заработает. Но это какое-то варварство, на мой взгляд.

Comments

[Николай Чуприк]

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

[0xD34F]

Николай Чуприк, отдельный метод - это и есть "элегантный способ". А вписывать несколько команд в v-on - это не дело. Но если вам так хочется... дополнил ответ.

[Николай Чуприк]

0xD34F,

А вписывать несколько команд в v-on - это не дело.

Намотаю на ус. Спасибо.

Answer 2

[Evgeny Kulakov]

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

@click = "function(){ myVueMeth1(); myVueMeth2(); document.forms[0].submit() }.bind(this)"

Answer 3

[evilray]

Если вам нужен глобальный контекст в v-on, то вы не правильно готовите vue.

Если расскажите о задаче подробнее, можно будет подробнее ответить как правильно.

Comments

[Николай Чуприк]

Есть у меня такое подозрение. Но это моё первое Vue-приложение: termootkos.ru

А конкретный контекст такой. Надо по клику на <a> отправить форму:

<form v-if = "(totalPrice !== 0)" action = "download_xls.php" method = "post">
			<input type = "hidden" :value = "jsonSpecification" name = "json_specification">	
			<a onclick = "vm.recalculate(); vm.makeJsonSpecification(); document.forms[0].submit()">Скачать xls-файл</a>
</form>

Буду очень благодарен за критику.

[evilray]

Во первых вы путаете onclick и @click. Onclick — событие яваскрипта, @onclick сокращение vue-директивы v-on:click. Внутри v-on:click можно вместо vm.methodName() использовать methodName(). Это, собственно, ответ на ваш первый вопрос.

Далее :)

По феншую вам не нужно отправлять форму. Нужно задать vue-модель для инпутов:
v-model="calcilatorForm.title"> (остальным полям также)

В js файле добавить в data:

...
data: {
    calculatorForm: {
        title: '',
        ...остальные поля
    },
    page : 'calculation',
    ...
},
...

Вместо сабмита формы отправлять через ajax данные из модели (это уже отдельный вопрос). Ну и рекалькуляты, конечно, не нужны :) Есть событие @change которое будет пересчитывать все что вы захотите на лету.

Вообще, на ларакаст очень хороший и доступный (если понимаете английский), а главное бесплатный курс по vue . Там есть и про формы.

[Николай Чуприк]

evilray, во-первых, большое спасибо.

1. @click и onclick и дальнешее (не)испольование vm. я понимаю. Собственно onclick для того, чтобы получить глобальный контекст и обратиться к document. В этом собственно и был изначальный вопрос.

2. Метод vm.recaculate() делает не то, что в подумали. Там нет ничего связанного с данными Vue, это сложные перерасчёты спецификации фасадного декора по всем окнам, поиск оптимальной раскладки.

3. Я понимаю, что можно посылать данные по ajax, а не форму. Но дело в том, что мне в ответ мне нужен не обычный response аяксовский, а чтобы на локальный компьютер прилетел на сохранение xls-файл. Т.е. там возращается 'Content-Description: File Transfer'. Не знаю, можно ли так делать с помощью ajax.

И ещё раз спасибо. Пойду совершенствоваться.

[evilray]

Я забыл самое очевидно решение — навесить на форму <form @submit="onSubmit">, а вместо ссылки сделать кнопку, которую при желании в css можно сделать выглядящей как ссылка. В onSubmit уже запихать и рекалькулейт, и всё что душе угодно.

Я посмотрел функцию recalculate, она вполне может делать перерасчет как по изменению любого поля (собственно ради этого и имеет смысл завозить vue — реактивность же), так и по onBlur.

Например вот. Респонс возвращает ссылку, пока сервер думает форма блокирована полупрозрачным слоем и спиннером, после получения ответа — запускаем загрузку по полученной ссылке.

[Николай Чуприк]

evilray, да, это самое то, что надо. Не знаю, почему мне самому это не пришло в голову.

Что касается recalculate, то при редактировании полей влияющих на расчёт по @change происходит вызов перерасчёта. Просто при отсылке результата ещё раз на посошок выполняется recalculate с более глубоким рекурсивным перебором вариантов (там по-сути задача коммивояжера) для нахождения, быть может, ещё более оптимальной раскладки декора. А при обычном @change для скорости реакции глубокая оптимизация не делается. Она может дать проигрыш 1-2% по сравнению с наилучшими вариантами, на нахождение которых может уходить секунд до 5 (на Core i7), в отличие от мгновенной реакции при простом расчёте.

Спасибо за ссылку, пойду изучу. Хотя сервер у меня быстро работает. В начале всё думал, где делать "тяжёлый" счёт: на сервере или на клиенте. В итоге выбрал счёт на клиенте. Клиент при закгрузке страницы получает в начале "JSON-выписку" из БД примерно на две сотни строк. Сам всё рассчитывает. Сервер нужен только для того, чтобы создать xls-файл, что невозможно сделать при помощи JS. Сервер при этом не думает, ему JS уже присылает готовый расчёт в JSON, который надо только сверстать в xls и вернуть.