VueJs Понимание v-модели и v-on: нажмите - PullRequest
Новая
       39

VueJs Понимание v-модели и v-on: нажмите

0 голосов
/ 24 февраля 2020

В настоящее время я пытаюсь выучить VueJS, исходя из jQuery фона, и столкнулся с чем-то, чего я либо не понимаю, либо пытаюсь сделать неправильно. Я использую VueJS и Laravel. Я добавляю VueJS к своим шаблонам блейдов.

У меня есть таблица с несколькими строками данных. В этих строках у меня есть поле для ввода текста. Каждая строка также содержит две иконки, которые позволяют мне перемещать строку вверх или вниз.

Когда я нажимаю на иконку, я хочу отправить запрос ax ios, сообщающий моей базе данных об обновлении поля заказа. Когда он возвращает сообщение об успехе, я хочу перезагрузить таблицу с новым заказом.

После нажатия на значок v-onclick и перезагрузки таблицы в мой div топором ios - v-onclick перестает работать. Кроме того, привязка v-модели, которую я настроил, также перестает работать. Когда я обновляю значение в текстовом вводе, оно больше не обновляет значение в свойстве data.

Я добавил jsFiddle, чтобы дать представление о том, что я пытаюсь выполнить sh. Я использую ax ios, чтобы получить маршрут, который возвращает представление таблицы продуктов. 

            ```reload : function(){
                url = '/products;
                axios.get(url).then(response => {
                    document.getElementById('products').innerHTML = response.data;
                });
            },```

https://jsfiddle.net/k8Lj4asb/1/

Ответы [ 2 ]

0 голосов
/ 24 февраля 2020

Я бы передал объект продуктов на javascript, Laravel имеет пакет для этого https://github.com/laracasts/PHP-Vars-To-Js-Transformer Джеффри Уэя.

Редактировать: о, отмените, это выглядело из своей сломанной скрипки вы пытались сделать что-то другое.

В вашем обработчике ответов axe ios просто обновите свойство данных для продуктов с данными ответа. Тогда l oop это свойство в VUE, PHP сторона l oop не требуется. 

  <td v-for="product in products">
    <input v-model="product.id" type="text" :name="product.name">
  </td>
0 голосов
/ 24 февраля 2020

Это неправильный способ обновления таблицы в VueJS. Управляя DOM напрямую, вы вносите изменения в сайт, который Vue не отслеживает (и, следовательно, не знает), что нарушает реактивность.

Правильный способ сделать это - сохранить свой список в Vuex-Store и выполните обновление там. Я рекомендую прочитать на topi c, используя отличную документацию, представленную здесь: https://vuex.vuejs.org/

...