Приветствую. Возникла такая задача (vue.js): Есть текстовый инпут, рядом с ним есть <p>. Нужно, чтобы при вставке текста в текстовый инпут страница стучалась на бэкенд с содержимым этого инпута, забирала от бэкенда ответ и выводила его в <p>. Привязал инпут к модели: <p class="hw-name">{{ side_a_hw_address }}</p> <input type="text" name="side-a-link" size="40" v-model="side_a['hw']" id="side-a-hw"> Повесил watch через computed: computed: { side_a_hardware() { return this.side_a.hw }, side_a_hw_address() { return this.side_a_help.address } } watch: { side_a_hardware() { data = { 'action': 'get_asset', 'asset_link': (this.side_a['hw']) }; console.log(data); fetch('/ajax/cross', { credentials: 'include', method: 'post', body: JSON.stringify(data) }) .then(response => { console.log(response); return response.json(); }) .then(dta => { if (dta.type == 'message') { this.side_a_help.address = dta.address; } }) } Проблема в том, что содержимое <p> при вставке текста не меняется вообще никак, хотя судя по консоли и логам бэкенда в момент вставки данные приходят/уходят корректно. При этом, если после этого руками что-то в инпуте поменять - содержимое <p> обновляется сразу же. Думаю, не первый с такой проблемой сталкиваюсь, однако в гугле конкретно моей проблемы не нашел. Может кто помочь пожалуйста?

Приветствую. Возникла такая задача (vue.js): Есть текстовый инпут, рядом с ним есть <p>. Нужно, чтобы при вставке текста в текстовый инпут страница стучалась на бэкенд с содержимым этого инпута, забирала от бэкенда ответ и выводила его в <p>. Привязал инпут к модели: <p class="hw-name">{{ side_a_hw_address }}</p> <input type="text" name="side-a-link" size="40" v-model="side_a['hw']" id="side-a-hw"> Повесил watch через computed: computed: { side_a_hardware() { return this.side_a.hw }, side_a_hw_address() { return this.side_a_help.address } } watch: { side_a_hardware() { data = { 'action': 'get_asset', 'asset_link': (this.side_a['hw']) }; console.log(data); fetch('/ajax/cross', { credentials: 'include', method: 'post', body: JSON.stringify(data) }) .then(response => { console.log(response); return response.json(); }) .then(dta => { if (dta.type == 'message') { this.side_a_help.address = dta.address; } }) } Проблема в том, что содержимое <p> при вставке текста не меняется вообще никак, хотя судя по консоли и логам бэкенда в момент вставки данные приходят/уходят корректно. При этом, если после этого руками что-то в инпуте поменять - содержимое <p> обновляется сразу же. Думаю, не первый с такой проблемой сталкиваюсь, однако в гугле конкретно моей проблемы не нашел. Может кто помочь пожалуйста?

Приветствую. Возникла такая задача (vue.js): Есть текстовый инпут, рядом с ним есть <p>. Нужно, чтобы при вставке текста в текстовый инпут страница стучалась на бэкенд с содержимым этого инпута, забирала от бэкенда ответ и выводила его в <p>. Привязал инпут к модели: <p class="hw-name">{{ side_a_hw_address }}</p> <input type="text" name="side-a-link" size="40" v-model="side_a['hw']" id="side-a-hw"> Повесил watch через computed: computed: { side_a_hardware() { return this.side_a.hw }, side_a_hw_address() { return this.side_a_help.address } } watch: { side_a_hardware() { data = { 'action': 'get_asset', 'asset_link': (this.side_a['hw']) }; console.log(data); fetch('/ajax/cross', { credentials: 'include', method: 'post', body: JSON.stringify(data) }) .then(response => { console.log(response); return response.json(); }) .then(dta => { if (dta.type == 'message') { this.side_a_help.address = dta.address; } }) } Проблема в том, что содержимое <p> при вставке текста не меняется вообще никак, хотя судя по консоли и логам бэкенда в момент вставки данные приходят/уходят корректно. При этом, если после этого руками что-то в инпуте поменять - содержимое <p> обновляется сразу же. Думаю, не первый с такой проблемой сталкиваюсь, однако в гугле конкретно моей проблемы не нашел. Может кто помочь пожалуйста?

Хвала тому человеку, кто ввёл эту штуку

Согласен.

Даа) А ты бы мог на pastebin кидать) согласен он.

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

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

Ну этот бот есть не везде.

Да и мало ли кто-то захочет твой код протестить и самостоятельно запустить, с картинки сидеть списывать не все любят.

Ну у тебя да) Я про тех кто чисто картинки кидает.

Приветствую. Возникла такая задача (vue.js): Есть текстовый инпут, рядом с ним есть <p>. Нужно, чтобы при вставке текста в текстовый инпут страница стучалась на бэкенд с содержимым этого инпута, забирала от бэкенда ответ и выводила его в <p>. Привязал инпут к модели: <p class="hw-name">{{ side_a_hw_address }}</p> <input type="text" name="side-a-link" size="40" v-model="side_a['hw']" id="side-a-hw"> Повесил watch через computed: computed: { side_a_hardware() { return this.side_a.hw }, side_a_hw_address() { return this.side_a_help.address } } watch: { side_a_hardware() { data = { 'action': 'get_asset', 'asset_link': (this.side_a['hw']) }; console.log(data); fetch('/ajax/cross', { credentials: 'include', method: 'post', body: JSON.stringify(data) }) .then(response => { console.log(response); return response.json(); }) .then(dta => { if (dta.type == 'message') { this.side_a_help.address = dta.address; } }) } Проблема в том, что содержимое <p> при вставке текста не меняется вообще никак, хотя судя по консоли и логам бэкенда в момент вставки данные приходят/уходят корректно. При этом, если после этого руками что-то в инпуте поменять - содержимое <p> обновляется сразу же. Думаю, не первый с такой проблемой сталкиваюсь, однако в гугле конкретно моей проблемы не нашел. Может кто помочь пожалуйста?

Приветствую. Возникла такая задача (vue.js): Есть текстовый инпут, рядом с ним есть <p>. Нужно, чтобы при вставке текста в текстовый инпут страница стучалась на бэкенд с содержимым этого инпута, забирала от бэкенда ответ и выводила его в <p>. Привязал инпут к модели: <p class="hw-name">{{ side_a_hw_address }}</p> <input type="text" name="side-a-link" size="40" v-model="side_a['hw']" id="side-a-hw"> Повесил watch через computed: computed: { side_a_hardware() { return this.side_a.hw }, side_a_hw_address() { return this.side_a_help.address } } watch: { side_a_hardware() { data = { 'action': 'get_asset', 'asset_link': (this.side_a['hw']) }; console.log(data); fetch('/ajax/cross', { credentials: 'include', method: 'post', body: JSON.stringify(data) }) .then(response => { console.log(response); return response.json(); }) .then(dta => { if (dta.type == 'message') { this.side_a_help.address = dta.address; } }) } Проблема в том, что содержимое <p> при вставке текста не меняется вообще никак, хотя судя по консоли и логам бэкенда в момент вставки данные приходят/уходят корректно. При этом, если после этого руками что-то в инпуте поменять - содержимое <p> обновляется сразу же. Думаю, не первый с такой проблемой сталкиваюсь, однако в гугле конкретно моей проблемы не нашел. Может кто помочь пожалуйста?

Ну код картинкой кидать - это издевательство, ящитаю.

А кто верстает сейчас без автопрефиксера?

Но в общем мне бы по моей трабле рекомендацию получить, а то это оффтоп)

Откуда у тебя переменная data? Может this.data ?

В вотче side_a.hardware? Это просто объект, который я создаю для отправки на бэкенд. This там не нужен.

Приветствую. Возникла такая задача (vue.js): Есть текстовый инпут, рядом с ним есть <p>. Нужно, чтобы при вставке текста в текстовый инпут страница стучалась на бэкенд с содержимым этого инпута, забирала от бэкенда ответ и выводила его в <p>. Привязал инпут к модели: <p class="hw-name">{{ side_a_hw_address }}</p> <input type="text" name="side-a-link" size="40" v-model="side_a['hw']" id="side-a-hw"> Повесил watch через computed: computed: { side_a_hardware() { return this.side_a.hw }, side_a_hw_address() { return this.side_a_help.address } } watch: { side_a_hardware() { data = { 'action': 'get_asset', 'asset_link': (this.side_a['hw']) }; console.log(data); fetch('/ajax/cross', { credentials: 'include', method: 'post', body: JSON.stringify(data) }) .then(response => { console.log(response); return response.json(); }) .then(dta => { if (dta.type == 'message') { this.side_a_help.address = dta.address; } }) } Проблема в том, что содержимое <p> при вставке текста не меняется вообще никак, хотя судя по консоли и логам бэкенда в момент вставки данные приходят/уходят корректно. При этом, если после этого руками что-то в инпуте поменять - содержимое <p> обновляется сразу же. Думаю, не первый с такой проблемой сталкиваюсь, однако в гугле конкретно моей проблемы не нашел. Может кто помочь пожалуйста?

В вотче side_a.hardware? Это просто объект, который я создаю для отправки на бэкенд. This там не нужен.

И пиши плз камелКейсом, глаза на лоб вылезают

И я правильно понял что проблема в том, что на бэк уходит слишком много запросов?

Через vue devtools тестил? Возможно реактивность отвалилась

Хм, нет, не пробовал. Но если бы отвалилась реактивность - по идее, тогда и при ручном вводе оно бы не реагировало, не?

Хм, нет, не пробовал. Но если бы отвалилась реактивность - по идее, тогда и при ручном вводе оно бы не реагировало, не?

А ты уверен что с сервера приходит что-то? Продебаж

Уверен, потому что после того, как я вставленный текст редактирую руками - в p отображаются верные данные. В логах сервера и в консоли тоже вижу то, что ожидаю увидеть.

У тебя инпут к другому полю привязан

Ребят, подскажите удобный ресурс для изучения TypeScript?

инпут: v-model="side_a['hw']" компьютед: side_a_hardware() { return this.side_a.hw }, вотч: side_a_hardware() {...

Попробуй спросить тут @vuejs_club

Попробуй спросить тут @vuejs_club

Приветствую. Возникла такая задача (vue.js): Есть текстовый инпут, рядом с ним есть <p>. Нужно, чтобы при вставке текста в текстовый инпут страница стучалась на бэкенд с содержимым этого инпута, забирала от бэкенда ответ и выводила его в <p>. Привязал инпут к модели: <p class="hw-name">{{ side_a_hw_address }}</p> <input type="text" name="side-a-link" size="40" v-model="side_a['hw']" id="side-a-hw"> Повесил watch через computed: computed: { side_a_hardware() { return this.side_a.hw }, side_a_hw_address() { return this.side_a_help.address } } watch: { side_a_hardware() { data = { 'action': 'get_asset', 'asset_link': (this.side_a['hw']) }; console.log(data); fetch('/ajax/cross', { credentials: 'include', method: 'post', body: JSON.stringify(data) }) .then(response => { console.log(response); return response.json(); }) .then(dta => { if (dta.type == 'message') { this.side_a_help.address = dta.address; } }) } Проблема в том, что содержимое <p> при вставке текста не меняется вообще никак, хотя судя по консоли и логам бэкенда в момент вставки данные приходят/уходят корректно. При этом, если после этого руками что-то в инпуте поменять - содержимое <p> обновляется сразу же. Думаю, не первый с такой проблемой сталкиваюсь, однако в гугле конкретно моей проблемы не нашел. Может кто помочь пожалуйста?

Зачем ты используешь computed здесь?

Через компьютед сделал, чтобы не лезть в deep в watch, т.к. side_a - это объект, а мне нужно отслеживать только одно из его полей.

У тебя есть change

@change имеешь в виду?

Щас попробуем, но вообще я в watch полез из-за того, что хэндлеры давали ту же проблему, что я описал. Хотя не помню, использовал ли именно change.

https://jsfiddle.net/64q93pL2/

Хм, странно. Уверен, что такой вариант тоже пробовал, но с ним не работало. Хотя выглядит все очень логично. А может проблема быть во взаимодействии vue и fetch?

Владилен Минин

Здесь в примере у тебя выводится результат v-model или сеттинга Math.random?

http://i.imgur.com/vJRxH1o.png - линк вставлен в инпут. Ввожу в консоли браузера app.side_a_help.address, в ответ получаю: > "01.06.08/30" Затем руками меняю последний символ в линке, результат: http://i.imgur.com/S1pPfgO.png

Мб тебе сеттеры и геттеры нужны?

Но как они тут помогут?

Я просто не уверен,что тут нужен watch вообще, @input чекал?

Почему не подошёл?

http://i.imgur.com/vJRxH1o.png - линк вставлен в инпут. Ввожу в консоли браузера app.side_a_help.address, в ответ получаю: > "01.06.08/30" Затем руками меняю последний символ в линке, результат: http://i.imgur.com/S1pPfgO.png

С помощью v-model я заношу данные с инпута в дату, потом @input берет эти данные из даты и вызывает нужный метод