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?
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.
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)
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}`)
Related
I'm trying to get a single record from Firestore to display in Vue.js. I'm using VueFire and the guide here.
<script setup>
import { initializeApp } from 'firebase/app'
import { getFirestore , doc } from "firebase/firestore";
import { useDocument } from 'vuefire'
const firebaseConfig = {...};
// Initialize Firebase
const firebaseApp = initializeApp(firebaseConfig);
const analytics = getAnalytics(firebaseApp);
const db = getFirestore(firebaseApp);
const place = useDocument(doc(db, "data", "key"));
console.log(place)
</script>
<template>
{{ place.title }}
</template>
The data logged is RefImpl {__v_isShallow: false, dep: undefined, __v_isRef: true, _rawValue : {title: 'I am a title', however when it gets to the template there is an error
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'title')
Maybe try this.
...
const { data: place, pending } = useDocument(doc(db, "data", "key"));
</script>
<template>
<h1>Place</h1>
<template v-if="!pending">{{ place.title }}</template>
</template>
I'm just following what they the author of VueFire has posted here: https://github.com/vuejs/vuefire/blob/df3c235f226d4e4c821391bcce74a1c3a6134406/packages/nuxt/playground/pages/firestore-useDocument.vue
You can use the pending property to show the place once it has loaded.
You can also read about Subscription State here where they talk about destructuring. https://v3.vuefire.vuejs.org/guide/realtime-data.html#subscription-state
If anyone finds this because they need the data from useDocument() asynchronously, you can do something similar, based on Kyle's suggestion above (the Github post by the vueFire author):
const { data: place, promise } = useDocument(doc(db, 'data', 'key'))
promise.value.then((place) => {
// do something with place like console.table(place)
})
Even if you don't want to listen for changes, you still have to use the "subscription" method to get the data asynchronously. async/await doesn't work. This needs to be a lot clearer in the documentation IMHO.
I have the deman to fetch the server data and then process before rendering the page.
here is the code in my index.vue, in option api:
<template>
<div>{{userData.name}}</div>// 💗'helloworld'
<div>{{testName}}</div>// ❌'undefined'
</template>
<script>
import {ref} from 'vue'
import axios from 'axios'
export default{
setup(){
const userData=ref([])
const testName = ref('')
oNmounted(async ()=>{
const res=await axios({url:'/myProfile',method:'get'})
})
userData.value=res.data.data //here I can get the async data after the Internet time travel.
//in other func to process the `userData` object which would be `[{name:'helloWorld',...}]
testName.value = userData.name
cosole.log(userData.name) //output `undefined`, but if i refer it in the template section, it works.
}
return {
userData,
testName,
}
}
</script>
I want to process the async data before it is rendered, how can I make sure that I could obtain the fetched data to use in the <script> section instead of <template> section?
And the userData I defined is a ref, in the beginnig of the async fetch, it is assumed to be undefined, but after the async axios, the userData is assinged to the latest target value I want, then why they won't be updated accordingly?
what am I missing in this fulfillment?
You defined userData as a ref (see https://vuejs.org/api/reactivity-core.html#ref)
const userData = ref([])
When you want to access the value of userData inside your code block, you need to use the property .value to points to the inner value.
If access is in the template tag, don't use the .value property.
So the corrected line would be :
testName.value = userData.value.name
Building out an ecommerce store. Started with the products, which require no auth to pull, but do require auth to edit. This is working fine, and I suspect it's because this is happening on the client which sends auth info with all requests direct from client (ie methods hook).
However, order data does require auth to access any of it. I'm unable to access this route to generate the page using asyncData. I suspect this is because it's happening on the Nuxt server instead of on the client.
async asyncData({ $config: { apiURL } }) {
let orders = await axios.get(
`${apiURL}/orders`
);
return { orders: orders.data.data };
},
What is the correct way to do this? Set an empty data point then use mounted or created to pull and set?
Update: I got it working with as a method, but then you have to press the button to pull all the orders, that's pretty bad ux lol what do
An alternative solution would be
<template>
<section>
<div v-for="user in users" :key="user.id">
{{ user.name }}
</div>
</section>
</template>
<script>
export default {
async asyncData({ $axios, $config: { jsonPlaceholder } }) {
const fetchedUsers = await $axios.$get(`${jsonPlaceholder}/users`)
return { users: fetchedUsers }
},
data() {
return {
users: [],
}
},
}
</script>
This is using JSONplaceholder as an example, in your case you may add an additional data as you did initially.
This solution has the benefit of blocking the render of the page until the call is done (mounted() cannot).
Got it working, this is what I did:
data: () => ({
orders: []
}),
mounted() {
this.$axios.$get(`${this.$config.apiURL}/orders`).then( res => {
this.orders = res.data
})
},
Let me know if there's a better way to go
I am trying to send some text on basic of hosted url (where my build is deployed).but i am getting this error
ReferenceError: location is not defined
here is my code
https://codesandbox.io/s/laughing-mendel-pf54l?file=/pages/index.js
export const getStaticProps = async ({ preview = false, previewData = {} }) => {
return {
revalidate: 200,
props: {
//req.host
name: location.hostname == "www.google.com" ? "Hello" : "ccccc"
}
};
};
Can you show your imports, because it could be that you are importing router from 'next/client'
Assuming that you are using functional-based component
You need to import router as follows:
import {useRouter} from "next/router";
in your function body:
const router = useRouter();
getStaticProps() is executed at build time in Node.js, which has no location global object – Location is part of the browser API. Additionally, because the code is executed at build time, the URL is not yet known.
Change getStaticProps to getServerSideProps (see documentation). This will mean the function is called at runtime, separately for each request.
From the context object passed to getServerSideProps, pull out the Node.js http.IncomingMessage object.
On this object, look for the Host header.
export const getServerSideProps = async ({ req }) => {
return {
props: {
name: req.headers.host === "www.google.com" ? "Hello" : "ccccc"
}
};
};
Note:
I also changed == to ===, as it's generally advised to use the latter. The former can produce some unexpected results because of silent type conversions.
I also removed revalidate, as this is not applicable to getServerSideProps().
I'm not very experienced, and I was wondering how I can extract data from firebase, updating the status element of vue.js. The problem is that I can not extract the fusion data dedicated to firebase "snapshot".
I leave you all the code and all the errors below.
Vue.js code:
<template>
<div id="app">
<div>
<h1>ON/OFF led</h1>
<h2>Status: {{ device.status() }}</h2>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import { deviceStatusRef } from './firebase';
var pinReport;
export default {
data () {
return {
name: '',
device: {
nome: 'led',
status: function(){
deviceStatusRef.on("value", function(snapshot) {
pinReport = snapshot.val();
console.log("[1] - pinReport value --> " + pinReport);
});
console.log("[2] - pinReport VALUE --> " + pinReport);
return pinReport;
}
}
}
},
}
</script>
<style>
</style>
Errors on Chrome:
That's the expected behavior. Data is loaded from Firebase asynchronously. By the time your [2] log statement runs, the data hasn't been loaded yet and pinReport is undefined.
This means that all code that needs the data must be inside the callback, like your [1] log statement. It also means that you can't return the value from the database from a function, since the return runs before the data is loaded.