I have a product page where i pass product id & based on that i call rest Api & after Api response i need to update title tag with product name. i am able to update title tag but in view source i get value as undefined or default value. So how to update title in the beginning so will get product name in view source. So that will be SEO friendly.
export default {
name: 'App',
components: {
HelloWorld
},
data () {
return {
setTitle: {}
}
},
created () {
axios.get('https://apiurl.com/testing.json')
.then((response) => {
this.setTitle = response.data
})
},
metaInfo() {
return {
title: `${this.setTitle.product_name} product name`,
meta: [
{
vmid: "description",
name: "description",
content:
"hello world, this is an example of adding a description with vueMeta"
}
]
}
}
}
Is it possible if in my project SSR is false?
You should use asyncData hook provided by nuxt which runs before creating the page (you don't need to define setTitle in data option ) and replace metaInfo by head :
export default{
name: 'App',
components: {
HelloWorld
},
async asyncData() {
const {data} = await axios.get('https://apiurl.com/testing.json')
return { setTitle:data} // without defining data option
},
head() {
return {
title: `${this.setTitle.product_name} product name`,
meta: [
{
vmid: "description",
name: "description",
content:
"hello world, this is an example of adding a description with vueMeta"
}
]
}
}
}
Related
I would like to have a dynamic breadcrumbs based on where I clicked on a category but I get an error that says my variable is undefined: TypeError: Cannot read properties of undefined (reading 'homeMenu'). Yet in my getHomeCategory function, the console.log of homeCategory displays Perma'Thèque. I don't understand how to do it, thanks
Here is the code :
<script>
export default {
props: {
},
data: () => ({
homeMenu: "",
breadcrumbs: [
{
text: 'Accueil',
disabled: false,
href: '/',
},
{
text: this.homeMenu,
disabled: false,
href: "/" + this.homeMenu,
},
],
}),
computed: {
...mapGetters({
console: () => console,
homeCategory: 'home/getCategory',
})
},
methods: {
getHomeCategory () {
if (this.homeCategory === "Perma'Thèque") {
console.log(this.homeCategory)
return this.homeMenu = "permatheque"
} else {
return this.homeMenu = "null"
}
},
},
mounted() {
if (this.plantActive) this.loading = false;
this.getHomeCategory()
}
}
</script>
data() is declared here as an arrow function, so this refers to the outer scope, not the Vue component instance, but even as a regular function here, this.homeMenu won't yet exist.
It seems that you actually want breadcrumbs to be reactive to homeMenu, so you should move breadcrumbs to a computed prop:
export default {
data: () => ({
homeMenu: '',
}),
computed: {
breadcrumbs() {
return [
{
text: 'Accueil',
disabled: false,
href: '/',
},
{
text: this.homeMenu,
disabled: false,
href: '/' + this.homeMenu,
},
]
}
}
}
demo
I used Element Plus UI and my mind was blown. Check out my blog and the codes. Element Plus is a free library that is great for Vue JS. They have very nice UI for breadcrumb and can be implemented with v-for loop.
https://medium.com/#samchowdhury/create-a-breadcrumb-with-vue-js-and-element-plus-ui-f3e2fde50a3e
In my project, I want to add some Ajax loaded menu items to my CoreUI sidebar in Vue. I already found a working solution, but it's kind of hacky and might have timing issues. Therefore I want to ask you, if there is a proper or at least better solution.
I also found this question from a few days ago, but it doesn't have an answer yet.
// main.js
new Vue({
el: '#app',
router,
icons,
template: '<App/>',
components: {
App
},
data: {
clientConfiguration: null
},
created: async function () {
let svcResult = await this.$http.get('Picking/ViewerSettings');
this.clientConfiguration = svcResult.data;
this.$children[0].$children[0].$children[0].$data.nav[0]._children[0].items =
svcResult.data.map(vc => ({
name: vc.name,
to: 'test/' + vc.name,
icon: 'cil-spreadsheet'
}));
}
})
// _nav.js
export default [
{
_name: 'CSidebarNav',
_children: [
{
_name: 'CSidebarNavDropdown',
name: 'Lists',
to: '/test',
icon: 'cil-list-numbered',
items: []
},
// ...
]
}
]
The _nav.js file is just an example of data structure that can be rendered by CRenderFunction component docs
The idea behind CRenderFunction is that you can render components from the Array/Object.
In your case, you have two options:
generate CRenderFunction object on backend,
generate CRenderFunction object on frontend by computed properties, based on data you got from the backend
Here is the example of the second approach:
in template
<CRenderFunction flat :content-to-render="navItems"/>
in script:
//example array that you receive from backend
const menuItems = [
{
name: 'first item',
to: '/first',
icon: 'cil-user'
},
{
name: 'second item',
to: '/second'
},
{
name: 'third item',
to: '/third'
}
]
export default {
computed: {
navItems () {
return [
{
_name: 'CSidebarNav',
_children: this.sidebarNavChildren
}
]
},
sidebarNavChildren () {
return menuItems.map(menuItem => {
return {
_name: 'CSidebarNavItem',
name: menuItem.name,
to: menuItem.to,
icon: menuItem.icon || 'cil-spreadsheet'
}
})
}
}
}
navItems computed property result:
[{"_name":"CSidebarNav","_children": [
{"_name":"CSidebarNavItem","name":"first item","to":"/first","icon":"cil-user"},
{"_name":"CSidebarNavItem","name":"second item","to":"/second","icon":"cil-spreadsheet"},
{"_name":"CSidebarNavItem","name":"third item","to":"/third","icon":"cil-spreadsheet"}
]
}]
I am using tabulator with vue. Packages: tabulator-tables and vue-tabulator.
I'm trying to set a click event on the tabulator row, but need to access the vue data variables within the click event.
The script looks like this:
import axios from "axios";
import qs from "qs";
import { TabulatorComponent } from "vue-tabulator";
export default {
components: {
name: "Main",
CustomerData: TabulatorComponent
},
data() {
return {
tab: "",
customer_data: "",
customers: null,
cdata: [
{
f_name: "",
l_name: ""
}
],
customer_options: {
rowClick: function(e, row) {
axios
.post(
"php/getcustomer.php",
qs.stringify({
id: row.getCell("id").getValue()
})
)
.then(response => {
console.log(response);
})
.catch(error => {
console.log(error);
});
},
layout: "fitColumns",
columns: [
{
title: "ID",
field: "id",
sorter: "string",
visible: false,
},
{
title: "First",
field: "f_name",
sorter: "string",
editor: false,
},
{
title: "Last",
field: "l_name",
sorter: "string",
editor: false,
}
]
}
};
},
methods: {},
created() {
axios.get("php/getcustomers.php").then(response => {
this.cdata = JSON.parse(JSON.stringify(response)).data;
});
}
};
The how do I access the vue variable "customer_data" from within the "rowClick" event handler?
Your rowClick is not a method. You need to move it under the methods key and then you can access this.customer_data.
// ...Rest of the code
customer_options: {
rowClick: this.rowClick
},
// Rest of the data
methods:{
rowClick(e, row){
// Do your thing with this.customer_data
}
}
Also, why are you defining a function under customer_options. It seems weird.
Solution posted by Ankit works - by defining your handler inside methods handler has access to this which represents your Vue component instance (this is not defined for handler defined as anonymous function as in your question).
Other option is to use native Vue event vue-tabulator provides. Like this:
<TabulatorComponent v-model="cdata" :options="customer_options" #row-click="onRowClick"/>
methods: {
onRowClick(e, row) {
console.log(
`Clicked on row ${row.getCell("id").getValue()} (${this.tab})`
);
}
}
I want to use this vue flipbook component and it needs a array of image urls for the prop "pages". My posts response is coming from the wordpress rest api.
I need to get the "image" property from the response array and convert it into another array of image urls. Normally I would use the posts() in computed like v-for=post in posts in my template and display the image like post.image_full in the loop..
Flipbook component:
<Flipbook
class="flipbook"
:pages="imagesArray" <--- images array here
v-slot="flipbook"
ref="flipbook"
>
</Flipbook>
My Posts.vue component:
export default {
name: 'GridOne',
props: {
page: {
type: Number,
required: true
}
},
data() {
return {
request: {
type: 'posts',
params: {
per_page: this.$store.state.site.posts_per_page,
page: this.page
},
showLoading: true
},
totalPages: 0
}
},
computed: {
posts() {
return this.$store.getters.requestedItems(this.request) <--- my response array
}
},
methods: {
getPosts() {
return this.$store.dispatch('getItems', this.request)
},
setTotalPages() {
this.totalPages = this.$store.getters.totalPages(this.request)
}
},
created() {
this.getPosts().then(() => this.setTotalPages())
}
}
You can use JavaScript "map" function. This function takes one array and return a new one.
// If this is the response array....
const response = [{name: 'image 1', url: 'https://uri.com/img1'}, ...]
// Then you return something like this
response.map(item => {
return {
...item,
image_full: item.url
}
})
Good afternoon everyone I'm having a problem converting json to csv, I'm using a lib I found at https://github.com/angeliquekom/vue-json-to-csv, to be very interesting, but I'm having trouble passing an arrau for component.
my code:
<template>
<vue-json-to-csv :json-data="data"
:labels="{
id: { title: 'id' },
co_tipo_nota: { title: 'co_tipo_nota' },
ds_nota: { title: 'ds_nota' },
ds_outro_criterio: { title: 'ds_outro_criterio' },
ds_nofl_avaliacao_anonimata: { title: 'fl_avaliacao_anonima' },
dt_nota: { title: 'dt_nota' },
}"
#success="val => handleSuccess(val)"
#error="val => handleError(val)">
<button>
<b>My custom button</b>
</button>
</vue-json-to-csv>
</template>
<script>
import VueJsonToCsv from 'vue-json-to-csv'
import { baseApiUrl } from '#/global'
import axios from 'axios'
export default {
name: 'DowloadCvsThree',
components: {
VueJsonToCsv,
},
data: function() {
return {
mode: 'save',
nota: {},
notas: [],
}
},
props: {
notas: Array
},
methods: {
loadUsers() {
const url = `${baseApiUrl}/notas`
axios.get(url).then(res => {
this.notas = res.data
})
},
mounted() {
this.loadUsers()
}
}
}
</script>
<style>
</style>
the error return is ?
[o erro][1]
[1]: https://i.stack.imgur.com/llHeZ.png
can anybody help me? I'm trying to pass an array to the json-to-csv: json-data = "data" component, but the date is not an array with I do?
he address of lib npm is: https://github.com/angeliquekom/vue-json-to-csv
awaiting return?