Блог

Я использую laravel, blade и Vue.js. Итак, чего я пытаюсь добиться, так это отправить опору из Vue.js компонент вместе со всем остальным в форме. Проблема в том, что основная часть формы находится в блейде, но опора находится в компоненте Vue (опора представляет собой массив объектов и не хранится в поле ввода, поэтому я не могу получить данные при отправке формы).

Я знаю, что могу отправить массив через axios, но для того, чтобы это работало, насколько я понимаю, мне нужно поместить всю форму в компонент Vue, чего я не хочу делать, так как у меня есть 2 отдельных компонента Vue в форме.

Я спрашиваю, могу ли я как-то сделать так, чтобы компонент «возвращал» массив как значение поля ввода html при отправке формы. Дело в том, что основные входные данные формы останутся в файле blade, а пользовательские компоненты vue будут находиться в их отдельных файлах.

Я спрашиваю об этом, потому что копирование всей формы в компонент vue кажется мне крайне неправильным — я также могу быть крайне неправ 🙂

Заранее спасибо за любую информацию!

Я не понимаю, почему неправильно иметь форму в компоненте Vue, должно быть все в порядке, и у вас будет гораздо больше контроля над данными.

Тем не менее, если вы не хотите этого делать, вы можете захватить событие отправки формы и извлечь данные формы, затем ввести их в свой компонент Vue и выполнить запрос. Пример:

 <form id="myForm">
...
</form>
 

Затем в вашем Vue.js навесной крюк:

 mounted() {
  const form = document.body.querySelector('#myForm')
  form.addEventListener('submit', function(e) {
    e.preventDefault();
    // Here you could query the inputs you need and extract the data you need
  });
)