Отправить массив формы с Vue в Laravel

До того, как я начал использовать Vue, у меня была простая форма, которая обновляла 1 значение в 1 столбце @ 1 запрос за раз. Теперь я использую Vue, и моя форма имеет новую «среднюю» кнопку, которая используется для создания массива элементов для отправки 1 запроса для динамического обновления нескольких столбцов.

Проблема в том, что теперь включено предотвращение по умолчанию, моя исходная форма отправки больше не работает, и мне нужно либо отправить запрос с помощью Vue, либо есть способ повторно включить действие по умолчанию для кнопки? Это было бы здорово.

<form @submit.prevent="newbutton">

// new button
<button @click="newbutton"></button>

// original button
<button @click="submit" :id="{{ $element->id }}></button> // @submit.enableDefault ??

forms axios laravel vuejs2 laravel-5.4
person Dazzle    schedule 21.02.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Предотвращение - это просто вспомогательный метод в @submit. Чтобы разрешить эту дисперсию, вам нужно будет переместить логику в свой метод newbutton

// in template remove prevent
<form @submit="newbutton" action="/where-this-should-post">

// in script move logic to your newbutton method
methods {
  newbutton(event) {
    if (formNotValid) {
      event.preventDefault()
    }
  }
}
person Austio    schedule 21.02.2017
comment
Интересно! Как вы проверяете formNotValid? Спасибо за помощь! - person Dazzle; 21.02.2017
comment
Нет необходимости проверять formNotValid, просто запускается event.preventDefault (); в средней кнопке и вынул @ submit.prevent, и он работает почти так, как ожидалось. Проблема теперь связана с привязкой данных vue к отправке формы - person Dazzle; 21.02.2017
comment
Это может быть вычисляемое свойство или вы можете создать функцию и вызвать ее. Он проверит все данные в вашей форме и убедится, что их можно отправить. - person Austio; 21.02.2017
comment
Также не требуется, чтобы в спа-салоне легче было выбить то на передке. - person Austio; 21.02.2017
comment
@Dazzle, тебе еще что-нибудь нужно на этом? - person Austio; 21.02.2017
comment
Я пытаюсь, но безуспешно. У меня есть объект данных, созданный из тегов выбора, но v-модель тегов не соответствует объекту данных, который я создаю с помощью параметров выбора. Как я могу прикрепить данные: {items = {} // к методам: {submit () {axios ({method: 'post', url: '/ post /. Id, data: vm. $ Data.items)}? прямо сейчас я пытаюсь вернуть $ request в моем контроллере Laravel, но я получаю код состояния 200, а в разделе Headers сетевой отладки отображается свойство items, как и ожидалось, но его нет в запросе - person Dazzle; 21.02.2017
comment
Хорошо, это звучит как отдельная проблема, когда вы не настраиваете данные с помощью vm.set ([] не является реактивным в vue). Сначала вы должны проверить, работает ли отправка с moving event.preventDefault, как описано выше, просто разместив что-то вроде строки 'foo' с помощью axios. Если данные попадают туда, создайте новый вопрос с новой проблемой, это поможет другим в будущем. Также всегда лучше добавить jsfiddle с примером. - person Austio; 21.02.2017
comment
Я устанавливаю данные с помощью vm. $ Set в средней кнопке, но не уверен, как я могу включить объект данных для отправки вместе с моим запросом .. все еще ищу - person Dazzle; 21.02.2017
comment
Давайте продолжим это обсуждение в чате. - person Austio; 21.02.2017