Here is my code inside the Component Script : Title tag doesn't show up when I inspect
import { useMeta } from "#nuxtjs/composition-api";
export default {
components: { },
head: {},
setup() {
useMeta({
title: 'My title',
meta: [
{
hid: 'description',
name: 'description',
content: 'My description',
},
],
})
const screenType = ref("desktop");
var deviceType = ""
// const screenType = ref("mobile")
// const screenType = ref("landscape")
if (process.browser) {
window.onNuxtReady(() => {
if (window.innerWidth < 500) {
screenType.value = "mobile";
} else {
screenType.value = "desktop";
}
if (navigator.userAgent.match(/mobile/i)) {
deviceType = "mobile";
} else if (navigator.userAgent.match(/iPad|Android|Touch/i)) {
deviceType = "tablet";
} else {
deviceType = "desktop";
}
})
}
} }
There is no head object in my nuxt.config.js
What am I missing here?
Use it like this in your setup function in your Page component with defineComponent :
export default defineComponent({
head: {}, // Needed in nuxt 2
setup() {
const { title, meta } = useMeta()
title.value = 'My title'
meta.value = [
{
hid: 'description',
name: 'description',
content:
'My description',
},
]
},
})
https://composition-api.nuxtjs.org/packages/useMeta
You should use defineComponent imported from "#nuxtjs/composition-api". Do not use defineComponent imported from "#vue/composition-api".
Related
I am trying to get data from server using vue and apexcharts, but even after I called data with axios, it gives me undefined..
What have I missed?
template
<apexchart
ref="chart1"
width="100%"
:options="chartOptions" :series="series">
</apexchart>
data from url
{
"pageviews": 1313,
"new_users": 1014
}
script
export default {
data: function () {
return {
series: [],
chartOptions: {
chart: {
type: 'donut',
},
colors: ['#01cd49', '#007568'],
labels: ['new', 're'],
}
},
created: function () {
this.getByVisitor()
},
methods: {
getByVisitor() {
const url = 'url';
axios
.get(url)
.then(response => {
this.$refs.chart1.updateSeries([{
name: 'Sales',
data: response.data
}])
})
.catch(error => (this.byVisitor = error.data));
console.log(`---------------this.$refs.chart1`, this.$refs.chart1);
},
}
See Updating Vue Chart Data
There's no need to directly call the updateSeries() method on the chart component since it is able to react to changes in series. All you have to do is update your series data property
export default {
data: () => ({
series: [], // 👈 start with an empty array here
byVisitor: null, // 👈 you seem to have missed this one for your error data
chartOptions: {
chart: {
type: 'donut',
},
colors: ['#01cd49', '#007568'],
labels: ['new', 're'],
}
}),
created: function() {
this.getByVisitor()
},
methods: {
async getByVisitor() {
const url = 'url';
try {
const { data } = await axios.get(url)
// now update "series"
this.series = [{
name: "Sales",
data
}]
} catch (error) {
this.byVisitor = error.data
}
},
}
}
Browser back button is not working. It redirects me to the home page instead of going to the previous page.
e.g
http://localhost:4200/#/component1/1
http://localhost:4200/#/component2/1
http://localhost:4200/#/component3/1
When I click back button when I am in component3 it has goes to component2 instead its going to the home page. Can anyone tell me the solution to this problem?
routing.ts
{
path: 'component1/:id',
component: Component1,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component2/:id',
component: Component2,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component3/:id',
component: Component3,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
oauthcallbackhandlerguard.service.ts
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> {
this.adalService.handleWindowCallback();
let engId: number = 0;
let engagementDetailId: number = 0;
if(route.data.isEngagementDetailId == true)
{
let engDetailData =this.engagementService.$engagementDetailId.subscribe((data) => {
if (data !== undefined && data !== null) {
engagementDetailId = data;
}
});
}
else
{
let engData =this.engagementService.$engagementId.subscribe((data) => {
if (data !== undefined && data !== null) {
engId = data;
}
});
}
let groupIds = JSON.parse(sessionStorage.getItem('groupids'));
return this.validateUserAccess(engId, engagementDetailId, state,groupIds);
}
private validateUserAccess(engId: number, engagementDetailId: number, state: RouterStateSnapshot,groupIds:number[]): Observable<boolean | UrlTree> {
if (engId > 0 || engagementDetailId>0) {
return this.authGuardService.validateUserAccess(engagementDetailId, engId,groupIds).map(response => {
console.log(response);
return response ? true : this.router.parseUrl('/unauthorized');
if (response) {
this.router.navigate([state.url]);
}
else {
this.redictToUnAutherized();
}
},
(error) => {
console.log('auth failed. Error ', error);
// this.redictToUnAutherized();
return false;
});
}
else {
return Observable.of(true);
}
}
private redictToUnAutherized() {
this.router.navigate(['/unauthorized']);
}
1- Run your app in diffrent browser
2- Add default routes
const routes: Routes = [
{ path: '', pathMatch: 'full', component: HomeComponent },
{
path: 'component1/:id',
component: Component1,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component2/:id',
component: Component2,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{
path: 'component3/:id',
component: Component3,
canActivate: [OAuthCallbackHandlerGuard],
data: { isId: true },
},
{ path: '**', component: HomeComponent }
];
3- Try to check in OAuthCallbackHandlerGuard if it is going to navigate page back and allow it with Auth
constructor (private _location: Location)
this._location.back();
I was able to pull data into the database with bootstrap-vue.
I need to transfer to ag-grid, but I don't know how to do it
Someone help-me, this is code in ag-grid:
<template v-if="instituicao">
<div>
<button #click="getSelectedRows()">Get Selected Rows</button>
<ag-grid-vue style="width: 1000px; height: 500px;"
class="ag-theme-balham"
v-model="instituicao.codigo" required
:floatingFilter="true"
:gridReady="onGridReady"
:enableColResize="true"
:columnDefs="columnDefs"
:rowData="rowData"
:enableSorting="true"
:enableFilter="true">
</ag-grid-vue>
</div>
</template>
<script>
import PageTitle from '../template/PageTitle'
import axios from 'axios'
import { baseApiUrl, showError } from '#/global'
import { AgGridVue } from "ag-grid-vue"
import { transformHeader, transformRows } from '../../lib/grid.js'
/* import "ag-grid-enterprise" */
export default {
name: 'InstituicaoAdmin',
components: { AgGridVue, PageTitle },
data() {
return {
columnDefs: null,
rowData: null,
mode: 'save',
instituicao: {},
instituicoes: [],
fields: [
{ key: 'id', label: 'Id', sortable: true },
{ key: 'name', label: 'Name', sortable: true }
],
}
},
methods: {
onGridReady(params) {
this.gridApi = params.api;
this.columnApi = params.columnApi;
this.gridApi.setHeaderHeight(50);
},
sizeToFit() {
this.gridApi.sizeColumnsToFit();
// this.autosizeHeaders();
},
autoSizeAll() {
var allColumnIds = [];
this.columnApi.getAllColumns().forEach(function(column) {
allColumnIds.push(column.colId);
});
this.columnApi.autoSizeColumns(allColumnIds);
},
getSelectedRows() {
const selectedNodes = this.gridApi.getSelectedNodes();
const selectedData = selectedNodes.map(node => node.data);
const selectedDataStringPresentation = selectedData.map(node => node.make + ' ' + node.model).join(', ');
alert(`Selected nodes: ${selectedDataStringPresentation}`);
},
loadInstituicoes() {
const url = `${baseApiUrl}/instituicao`
axios.get(url).then(res => {
this.instituicoes = res.data
})
},
reset() {
this.mode = 'save'
this.instituicao = {}
this.loadInstituicoes()
},
save() {
const method = this.instituicao.id ? 'put' : 'post'
const id = this.instituicao.id ? `/${this.instituicao.id}` : ''
axios[method](`${baseApiUrl}/instituicao${id}`, this.instituicao)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
remove() {
const id = this.instituicao.id
axios.delete(`${baseApiUrl}/instituicao/${id}`)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
loadInstituicao(instituicao, mode = 'save') {
this.mode = mode
this.instituicao = { ...instituicao }
}
},
beforeMount() {
this.columnDefs = [
{headerName: 'Id', field: 'id', sortable: true },
{headerName: 'Name', field: 'name', sortable: true, filter: true },
{headerName: 'Price', field: 'price', sortable: true, filter: true }
];
fetch('https://api.myjson.com/bins/15psn9')
.then(result => result.json())
.then(rowData => this.rowData = rowData);
},
computed: {
columnDefs() {
return transformHeader(this.payload.header);
},
rowData() {
return transformRows(this.payload.data.rows, this.columnDefs);
}
},
mounted() {
this.loadInstituicoes()
}
}
</script>
<style>
#import "../../../node_modules/ag-grid/dist/styles/ag-grid.css";
#import "../../../node_modules/ag-grid/dist/styles/ag-theme-balham.css";
</style>
My question is how can I do the GET, PUT, POST, and DELETE operations using the ag-grid framework.
Usando o bootstrap-vue, eu poderia executar ou obter o banco de dados através da propriedade "fields".
<script>
import PageTitle from '../template/PageTitle'
import axios from 'axios'
import { baseApiUrl, showError } from '#/global'
export default {
name: 'InstituicaoAdmin',
components: { PageTitle },
data: function() {
return {
mode: 'save',
instituicao: {},
instituicoes: [],
fields: [
{ key: 'id', label: 'Id', sortable: true },
{ key: 'name', label: 'Name', sortable: true }
]
}
},
methods: {
loadInstituicoes() {
const url = `${baseApiUrl}/instituicao`
axios.get(url).then(res => {
this.instituicoes = res.data
})
},
reset() {
this.mode = 'save'
this.instituicao = {}
this.loadInstituicoes()
},
save() {
const method = this.instituicao.id ? 'put' : 'post'
const id = this.instituicao.id ? `/${this.instituicao.id}` : ''
axios[method](`${baseApiUrl}/instituicao${id}`, this.instituicao)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
remove() {
const id = this.instituicao.id
axios.delete(`${baseApiUrl}/instituicao/${id}`)
.then(() => {
this.$toasted.global.defaultSuccess()
this.reset()
})
.catch(showError)
},
loadInstituicao(instituicao, mode = 'save') {
this.mode = mode
this.instituicao = { ...instituicao }
}
},
mounted() {
this.loadInstituicoes()
}
}
</script>
I was able to solve the problem using axios using destructuring:
beforeMount() {
this.columnDefs = [
{headerName: 'Id', field: 'id', editable: true},
{headerName: 'Name', field: 'name', editable: true}
];
axios.get(`${baseApiUrl}/instituicao`)
.then(({data}) => this.rowData = data)
},
In my AgGrid data, I have a column which has a value of array of objects like this:
...
media:
[
{ title: 'Facebook', site: 'http://www.facebook.com'},
{ title: 'Twitter', site: 'http://www.twitter.com'}
{ title: 'Instagram', site: 'http://www.instagram.com'}
]
...
I managed to show in by cellRenderer like this
'Facebook, Twitter, Instagram'
But my problem is my floating filter , I don't know how to filter all columns which has for example has 'Facebook' media.
Here's my custom floating filter component:
import Vue from 'vue'
export default Vue.extend({
template: `
<input type="text" #change="valueChanged($event)"/>
`,
data: function() {
return {
currentValue: ''
}
},
beforeMount() {},
mounted() {},
methods: {
valueChanged(event) {
this.currentValue = event.target.value
this.params.onFloatingFilterChanged({
model: this.buildModel()
})
},
onParentModelChanged(parentModel) {
this.currentValue = !parentModel ? 0 : parentModel.filter
},
buildModel() {
if (this.currentValue === 0) {
return null
}
return {
filterType: 'text',
type: 'equalsTo',
filter: this.currentValue,
filterTo: null
}
}
}
});
Im trying to store user data globally using a Vue mixin: (main.js)
import Vue from 'vue';
import Resource from 'vue-resource'
import App from 'App';
import router from 'router/index';
Vue.use(Resource);
Vue.mixin({ //globals
delimiters: ["[[", "]]"],
http: {
root: 'http://127.0.0.1:5000/'
},
data: function() {
return {
user: {
authorized: false,
username: '',
password: '',
avatar: '',
entry: '',
skill: '',
arena: {
id: '',
start: false,
votes: '',
}
}
}
}
});
new Vue({
router: router,
el: '#app',
components: {
App
},
template: '<App/>'
});
I get the data from a login page just fine: (part of Login.vue)
import Vue from 'vue';
export default {
name: 'Login-Page',
data() {
return {
message: 'Hello Vue!'
}
},
methods: {
_make_basic_auth(user, pass) {
var tok = user + ':' + pass;
return "Basic " + btoa(tok);
},
_fetch_user(protocol) {
this.message = 'waiting...';
var auth = this._make_basic_auth(this.user.username, this.user.password);
Vue.http.headers.common['Authorization'] = auth;
this.$http[protocol]('api/u/' + this.user.username).then(response => {
this.message = "Success";
if (response.body.authorized) {
this.user = {...this.user, ...response.body};
setTimeout(() => {
this.$router.push({
name: 'Profile',
params: {
id: this.user.username
}
});
}, 1000);
}
}, response => {
this.message = response.body;
console.log(response.status + " " + response.body);
});
},
register() {
this._fetch_user('post');
},
login() {
this._fetch_user('get');
}
}
}
The data is just reset on redirect: (part of Main.vue)
import Profile from 'components/Profile'
export default {
name: "Main-Page",
methods: {
enterArena() {
this.$http.get('api/match').then(response => {
console.log(response.body);
this.user.arena = {...response.body, ...this.user.arena};
this.$router.push({
name: "Arena",
params: {'id': response.body.id}
});
}, error => {
console.log(error.status + " " + error.body);
});
}
},
created() {
console.log(this);
console.log(this.user);
if (!this.user.authorized)
this.$router.push({
name: "Login"
});
}
}
It was working before, here is my old repo https://github.com/Jugbot/Painter-Arena-Web-API/tree/6f3cd244ac17b54474c69bcf8339b5c9a2e28b45
I suspect that the error is from my new arrangement of components in my Router or flubbed this references.
index.js:
routes: [
{
path: '',
name: 'Main',
component: Main,
children: [
{
path: '/arena/:id',
name: 'Arena',
component: Arena
},
{
path: '/u/:id',
name: 'Profile',
component: Profile
}
]
},
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/404',
component: NotFound
},
{
path: '*',
redirect: '/404'
},
],
mode: 'hash'
Update:
Problem is still unsolved but as a workaround I just moved all mixin data to the $root instance and that managed to work.
I recommend you to use vuex for better state management. It is complicated to use mixins as a data storage for a vue application. Using vuex is convenient way to manipulate dynamic or static data across the application and will not be deleted in destroy hook upon exiting on a component.