如何将数据从 express 的渲染传递到 vue 组件？

Question

Given an express route,

page.js

router.post('/results', (req, res, next) => {
    output.terms  = "hello"
    output.results = [{"text": "hello world"}, {"text": "hello sunshine"}]
    res.render("/myview",output)    
})

The following works and shows the text.

myview.pug

extends ../layout.pug

block content
    each result in results
        span=result.text

But the following vue component doesn't. I receive TypeError: results is undefined

results-view.vue

<template lang="pug">
    li(v-for='result in results')
        span {{ result.text }}
</template>

<script>
    export default {
        ...
    }
</script>

myview.pug

extends ../layout.pug

block content
    results-view

How do I pass the data from router to vue component?

Answer 1

You should probably think of some other solution. It does not make sense to pass data from route to component. You can create an API endpoint that returns data and in Vue you can access it via request.

Answer 2

In the end, this worked. Might not be the best practice (I'm not sure, really) as warned by commenter serkan

results-view.vue

<template lang="pug">
    li(v-for='result in results')
        span {{ result.text }}
</template>

<script>
    export default {
        name: 'results-view',
        props: ['results']
        ...
    }
</script>

myview.pug

extends ../layout.pug

block content
    results-view(results=results)

Answer 3

There are times when it makes sense to pass data from the router to your frontend component. No need to write an API and fetch that data in another roundtrip.

const customer = { id: '123', name: 'Jojo Sasa' }
res.render('customer/detail', { customer })

customer/detail.pug

// This will define customer as a global variable
script window.customer= !{JSON.stringify(customer)}

//The below code will run in the browser
script.
  // This code will run in the browser
  alert(`Customer is: ${cutomer.name}`)