CODEWITHSUNDEEP
laravelvue.js
Elias
Elias

Reputation: 155

Get Data back from Vue Component

Is it possible to get Data back from a vue component?

Laravel blade.php code:

...
<div>
<component1></component1>
</div>
...

In component1 is a selectbox which i need (only the selected item/value) in the blade.php

Upvotes: 2

Views: 222

Answers (1)

Phortuin
Phortuin

Reputation: 770

A vue component, when rendered in the browser, is still valid HTML. If you make sure your component is wrapped in a form element and has a valid input element, and the form can be submitted, the PHP endpoint can consume the form’s data without problems. It could look like this:

Layout/view:

<form method="post" action="/blade.php">
  <component1></component1>
  <button type="submit">Submit form</button>
</form>

Component (<component1/>):

<fieldset>
  <input type="checkbox" name="my_option" id="my_option">
  <label for="my_option">I have checked this checkbox</label>
</fieldset>

PHP script (blade.php):

echo $_POST["my_option"] // if checked, should print "on"

If you are looking for a JavaScript centered approach, you may want to serialize the form and fetch the endpoint; it could look similar to this:

import serialize from 'form-serialize';

const formData = serialize(form)
fetch(form.action, { method: 'POST' }, body: JSON.stringify(formData) })
  .then(response => {
    // update page with happy flow
  })
  .catch(error => {
    // update page with unhappy flow
  })

Building from an accessible and standardized basis using proper HTML semantics will likely lead to more understandable code and easier enhancements down the road. Good luck!

(Edit: if you require a complete, working solution to your question, you should post more code, both from the Vue app as well as the PHP script.)

Upvotes: 2

Related Questions