How to pass vue js data to php variable

Question

                            <section class="scans">
                                  <h3>Scans</h3>

                                  <ul v-if="scans.length === 0">
                                    <li class="empty">No scans yet</li>
                                  </ul>

                                  <transition-group name="scans" tag="ul">

                                            <li v-for="scan in scans" :key="scan.date" :title="scan.content">

                                            {{ scan.content }}

                                            </li>
                                  </transition-group>

                             </section>

How can i pass '{{ scan.content }}' to a html element (textbox) or php ($scanned) variable?

Are you asking how to display scan.content in a textbox? Or do you want to know how to POST your client-side data to the server so PHP can have access to it? — PatrickSteele
– PatrickSteele, Commented Oct 21, 2017 at 14:43
I want to know how to post that client-side data to my server side so i can access it via php — user8811273
– user8811273, Commented Oct 21, 2017 at 14:45
I suggest you look into an AJAX POST of some type (example: vue-resource or axios). — PatrickSteele
– PatrickSteele, Commented Oct 21, 2017 at 14:51

PatrickSteele · Accepted Answer · 2017-10-21 14:54:34Z

2

Depending on how you want your data to be sent either make a form with hidden elements (usually if the user should initiate the post request) or make an AJAX POST directly in Javascript. (if it should be 'seamless'/in the background)

edited Oct 21, 2017 at 14:54

PatrickSteele

14.7k2 gold badges55 silver badges54 bronze badges

answered Oct 21, 2017 at 14:53

SourceOverflow

2,0581 gold badge10 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user8811273 Over a year ago

Thankyou for your answer, i'll give it a try and keep you posted

Felipe Valdes · Accepted Answer · 2017-10-22 21:02:17Z

-1

Figure out how to make Vue send AJAX, maybe following a recent tutorial, like: https://vuejsdevelopers.com/2017/08/28/vue-js-ajax-recipes/ since apparently simply giving an id to the transition-group and using innerHTML and document.getElementById to fetch the data is for some reason bad form and should be avoided, for some reason...

edited Oct 22, 2017 at 21:02

answered Oct 21, 2017 at 14:49

Felipe Valdes

2,2571 gold badge18 silver badges33 bronze badges

2 Comments

PatrickSteele Over a year ago

Since the data is already in his Vue data, there's no need to use innerHTML and DOM lookups to find it. Vue makes a clear separation between data and presentation which removes the needs to DOM manipulation/querting.

Felipe Valdes Over a year ago

Patric, I edited the answer, thanks for your suggestion, may I know how exactly does one send data to Vue? I'm a Vue newbie myself!

Collectives™ on Stack Overflow

How to pass vue js data to php variable

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related