如何将 db 查询的结果传递给 Vue？

Question

I have an API request that calls a SQL query within the function. I am trying to pass the results to a .vue page. (Using express-vue) Here is the api request

router.get('/search', (req, res, next) => {

    var keyword = ("%" + req.query.keyword + "%")
    var lat = req.query.lat
    var lng = req.query.lng

    console.log(keyword, lat, lng)

    connection.query('SELECT *, ( 3959 * acos (cos ( radians(?) )* cos( radians( lat ) )* cos( radians( lng ) - radians(?) )+ sin ( radians(?) )* sin( radians( lat ) ))) AS distance FROM job_posting where job_title like ? HAVING distance < 25', [
        lat, lng, lat, keyword
    ], function(err, rows) {

     })
  res.render('main', {
  // data: {
  //           results
  //         },
    vue: {
        meta: {
            title: 'Page Title',
        },
        components: ['myheader', 'myfooter', 'searchform', , 'results']
    }

});
})

and the Main.vue page

<template>
<div id="wrap">
    <div class="col-md-1"></div>
    <div id="main-container" class="container col-md-10">

        <myheader></myheader>
        <div class="col-md-4"></div>
        <div class="col-md-4">
        <searchform></searchform>
        <results></results>


        </div>
        <div class="col-md-4 text-center">

        </div>
        <div class="col-md-1"></div>


    </div>
</div>
</template>

Im trying to pass the data to this component results.vue

<template>

<p>Display data</p>

</template>

<script>
export default {
    data: function () {
        return {
            // dogs: 3
        }
    }
}
</script>

<style lang="css">
</style>

How do I pass the "rows" data to the results.vue page?

here is how the data is coming from the DB

[ RowDataPacket {
    id: 1,
    job_title: 'Software Engineer',
    job_desc: '<p>Ayo</p>',
    location: 'Akron, OH',
    job_type: 'Full-Time',
    salary: '',
    date_created: 2016-11-23T05:00:00.000Z,
    short_desc: 'yyoyo@gmail.com',
    apply_url: 'Ayo',
    lat: '41.084821',
    lng: '-81.515607',
    distance: 0 },
  RowDataPacket {
    id: 2,
    job_title: 'Software Engineer',
    job_desc: '<p>Ayo</p>',
    location: 'Akron, OH',
    job_type: 'Full-Time',
    salary: '',
    date_created: 2016-11-23T05:00:00.000Z,
    short_desc: 'yyoyo@gmail.com',
    apply_url: 'Ayo',
    lat: '41.084821',
    lng: '-81.515607',
    distance: 0 },
  RowDataPacket {
    id: 3,
    job_title: 'Software Engineer',
    job_desc: '<p>Ayo</p>',
    location: 'Akron, OH',
    job_type: 'Full-Time',
    salary: '',
    date_created: 2016-11-23T05:00:00.000Z,
    short_desc: 'yyoyo@gmail.com',
    apply_url: 'Ayo',
    lat: '41.084821',
    lng: '-81.515607',
    distance: 0 } ]

Answer 1

I don't know about express-vue, however I don't think making API calls from a route definition is a good idea.

Rather pass the lat and lng parameters through to your results component, and make the API call there, using a method, or the created() hook for example. It could make it a bit easier to change the implementation of the API in the future:

res.render('main', {
  data: {
    lat,
    lng,
  },
  vue: {
    meta: {
    title: 'Page Title',
  },
  components: ['myheader', 'myfooter', 'searchform', , '
}

EDIT

If you really need to query data from the route, and assuming the rows is an array of javascript objects, you can render your component within the callback of the query:

connection.query('SELECT *, ( 3959 * acos (cos ( radians(?) )* cos( radians( lat ) )* cos( radians( lng ) - radians(?) )+ sin ( radians(?) )* sin( radians( lat ) ))) AS distance FROM job_posting where job_title like ? HAVING distance < 25', [
    lat, lng, lat, keyword
], function(err, rows) {
  res.render('main', {
    data: {
      results: rows
    },
    vue: {
      meta: {
        title: 'Page Title',
    },
    components: ['myheader', 'myfooter', 'searchform', 'results']
  }
  next(); // You probably need to call this
})

Don't forget to call next() .