Hi it's my first post on StackOverflow.
I'm working on for translating dynamically a website. I'm using the package vuejs-localization.
How can I switch language directly?
I'm working with the latest version of VueJS and Laravel.
This is my code on my language selector:
export default {
name: "LanguageDropDown",
data() {
return {
languages: [
{
lang: "fr",
text: "Français",
icon: "fr",
},
{
lang: "gb",
text: "English",
icon: "gb",
},
{
lang: "us",
text: "US",
icon: "us"
},
],
};
},
computed: {
getCurrentLang: function() {
return this.$lang.getLang();
},
},
methods: {
setLanguage(lang) {
this.$root.$emit("setLang", lang);
},
setLang(lang, index) {
this.$root.$emit("setLang", this.languages[index].languages[lang], index);
},
},
};
And this is what is in my App.js :
const app = new Vue({
el: '#app',
router,
data() {
return {
lang: 'fr'
};
},
created() {
this.$lang.setLang( this.lang );
},
mounted() {
let _this = this;
this.$root.$on( 'setLang', function( lang ){
_this.lang = lang ;
console.log(_this.lang);
});
},
watch: {
lang :{
handler(val){
this.lang = val;
console.log('changed to :' + this.lang);
},
},
},
})
I expect a translation by changing the variable 'fr' to 'us' or 'gb' but the log says that the lang is switching but nothing happened ...
Thanks for your help.
To make language changes, you need to call this.$lang.setLang. You can do it in watch
watch: {
lang :{
handler(val){
this.lang = val;
this.$lang.setLang(val)
console.log('changed to :' + this.lang);
},
},
},
Related
I have a Gatsby application pulling data from Sanity.
This is Sanity's schema for the course.js:
import video from './video'
export default {
// Computer name
name: `courses`,
// Visible title
title: `Courses`,
type: `document`,
fields: [
{
name: `title`,
title: `Course title`,
type: `string`,
description: `Name of the course`
},
{
name: `slug`,
title: `slug`,
type: `slug`,
options: {
source: `title`,
maxLength: 100,
}
},
{
name: `price`,
title: `Price`,
type: `number`
},
{
name: `thumbnail`,
title: `Thumbnail`,
type: `image`,
options: {
hotspot: true,
}
},
{
name: `playlist`,
title: `Playlist`,
type: `array`,
of: [
{
title: `Video`,
name: `video`,
type: `video`,
}
]
},
]
}
And this is Sanity's schema for video.js:
export default {
// Computer name
name: `video`,
// Visible title
title: `Video`,
type: `object`,
fields: [
{ name: `title`, type: `string`, title: `Video title` },
{ name: `url`, type: `url`, title: `URL` },
{ name: `public`, title: `public`, type: `boolean`, initialValue: false }
]
}
This Gatsby page query:
{
allSanityCourses {
nodes {
title
price
playlist {
url
title
public
}
}
}
}
Results in:
{
"data": {
"allSanityCourses": {
"nodes": [
{
"title": "Master VS Code",
"price": 149,
"playlist": [
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Introduction",
"public": true
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Philosophy",
"public": false
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Tech and Tools",
"public": false
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Integration",
"public": true
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Extensions",
"public": false
}
]
}
]
}
},
"extensions": {}
}
To prevent the url field from being injected into the React component this Gatsby page query runs on (because these urls are paid for), I need to remove it, if the public field is set to false.
I've tried inserting this into gastby-node.js:
exports.createSchemaCustomization = ({ actions, schema }) => {
const { createTypes } = actions
const typeDefs = [
schema.buildObjectType({
name: "SanityCourses",
fields: {
playlist: {
type: "[SanityVideo]",
url: {
type: "String",
resolve: (source) => "nope"
},
},
},
interfaces: ["Node"],
}),
]
createTypes(typeDefs)
}
And:
exports.createResolvers = ({ createResolvers }) => {
const resolvers = {
SanityCourses: {
playlist: {
type: "[SanityVideo]",
url: {
type: "String",
resolve(source, args, context, info) {
return "nope"
},
}
},
},
}
createResolvers(resolvers)
}
But neither seems to work. The url field returns the url as always. The resolvers don't even seem to fire (I've tried putting console.log()'s in them).
Any help on how to remove the url field if the public field is set to false, or general direction to go in would be very appreciated.
Ditch the attempt in createSchemaCustomization since you don't need to customize the schema here (though I believe there is a way to achieve what you want using it, it is not expected that the data in it is sourced from existing nodes, and this undeclared dependency can create caching issues).
Then update your createResolvers function to something like this:
exports.createResolvers = ({ createResolvers }) => {
createResolvers({
SanityVideo: {
safeUrl: {
type: "String",
resolve: (source, args, context, info) => source.public ? source.url : null
},
},
})
}
I don't believe resolvers can replace schema-originated nodes (fields), hence using safeUrl instead of url
The type you are adding a field to is SanityVideo, and it doesn't matter what the parent node is—this will apply to all instances of SanityVideo in your data
I am try to create vue barchart & using apexChartData.
Here is my code
export default{
components: {
VueApexCharts
},
data () {
return {
barChart: {
series: [{
data: []
}],
chartOptions: {
plotOptions: {
bar: {
horizontal: true
}
},
dataLabels: {
enabled: false
},
xaxis: {
categories: []
}
}
}
},
methods: {
myFunction() {
this.$vs.loading();
axios.get("/api/auth/nameofapi").then(response => {
this.barChart.series[0].data = response.data[0]['data'];
this.barChart.chartOptions.xaxis.categories = response.data[1]['categories'];
this.$vs.loading.close();
}).catch(error => {
this.$vs.loading.close()
this.errorResponse(error);
});
}
},
mounted () {
this.myFunction();
}
}
My API Response payload like
[{"data":[4,1]},{"categories":["xyz","abc"]}]
After doing this bar chart is not loading, i am not sure where i am doing mistake, sorry for repeating this post if already exist but i just post what i am facing.
Any Help
Thanks in advance
I have an api that returns data in the following format:
{
"Information Technology": {
"Name": "Information Technology",
"Change": "0.82%"
},
"Consumer Staples": {
"Name": "Consumer Staples",
"Change": "0.19%"
}
}
I want to convert it to the following format inside my d3plus visualizations:
[
{
"Name": "Information Technology",
"Change": "0.82%"
},
{
"Name": "Consumer Staples",
"Change": "0.19%"
}
]
How do I do this. Here's my React component that uses d3plus:
function Chart() {
const methods = {
groupBy: 'Name',
data: 'https://example.com/api/sectors-performance',
size: d => d.Change
};
return <Treemap config={methods} />;
}
There was a small hint in the docs which helped me come up with this solution:
function Chart() {
const methods = {
groupBy: 'id',
data: 'https://example.com/api/sectors-performance',
size: d => d.value
};
const formatter = d =>
Object.keys(d).map(key => ({
id: d[key].Name,
value: numeral(d[key].Change).value()
}));
return <Treemap config={methods} dataFormat={formatter} />;
}
The trick is to send a formatter as a property!
In routes, I define a route "/ajax/tutorials/unique/images" that returns the below output:
{
"data": [
{
"path": "/images/posts/1474360249_qDhAVF0mA4TnCVUmfcIpkNtvEkyhpV.png"
},
{
"path": "/images/posts/1475575942_ZjuBj3u1rIvxdz1sK0pAuufzY8yjCT.png"
},
{
"path": "/images/posts/1476871481_H63O2o55sBg8Qx1bf6S8wW1M82XXJ1.png"
},
{
"path": "/images/posts/1476896115_JdyLpsxpcfL8kcpUwpFURV963WdeNa.png"
},
{
"path": "/images/posts/1487368925_RSouQqnDiu1ieBGfWStfHlodcptVWA.png"
},
{
"path": "/images/posts/1487368919_iAJUQpd3qx7RTB3ZnMsND0KmjrKrKu.png"
}
],
"paginator": {
"total_count": 15,
"total_pages": 3,
"current_page": 1,
"limit": 6
}
}
I wrote this code in app.js file:
new Vue({
el: '#app',
data: {
images: [],
pagination: [],
},
mounted() {
axios.get('/ajax/tutorials/unique/images')
.then(function (response) {
this.images = response.data.data;
this.pagination = response.data.paginator;
console.log(response.data.data);
console.log(response.data.paginator);
});
}
});
The images and pagination array that I define in app.js don't have any value after running this code, but in the browser console I can see the output:
But Vue doesn't set the response to variables:
When I use arrow function for callback it works, the problem is that I want to set two variable.
new Vue({
el: '#app',
data: {
images: [],
pagination: [],
},
mounted() {
axios.get('/ajax/tutorials/unique/images')
.then(response => this.images = response.data.data);
}
});
Oh I didn't know that, We can use array in arrow function for callback, So I changed code like below, and it's work
axios.get('/ajax/tutorials/unique/images')
.then( response => [
this.images = response.data.data,
this.pagination = response.data.paginator,
]);
You need to return a function from data.
data: function(){
return {
images: [],
pagination: [],
}
}
This is how Vue will observe the images and pagination changes later when you component runs.
You could simply do this:
axios.get('/ajax/tutorials/unique/images')
.then(response => {
this.images = response.data.data
this.pagination = response.data.paginator
console.log(response.data.data)
console.log(response.data.paginator)
})
this is the mutation I want to perform:
const GraphQLAddPlayerResponseMutation = mutationWithClientMutationId({
name: 'AddPlayerResponse',
inputFields: {
cdx: { type: new GraphQLNonNull(GraphQLInt) },
},
mutateAndGetPayload: ({cdx}) => {
var cdxAdded = addplayerResponse(cdx);
console.log("cdxAdded = ",cdxAdded)
return cdxAdded;
}, // what u return on mutateAndGetPayload is available on outputFields
outputFields: {
playerResponse: {
type: GraphQLInt,
resolve: ({cdxAdded}) => {
console.log("outputFields cdxAdded = ",cdxAdded)
return cdxAdded
},
},
viewer: {
type: GraphQLUser,
resolve: () => getViewer(),
},
},
});
Can't figure out what's wrong with the code, it logs on the mutateAndPayload:
mutateAndGetPayload: ({cdx}) => {
var cdxAdded = addplayerResponse(cdx);
console.log("cdxAdded = ",cdxAdded)
return cdxAdded;
},
but I think the outputFields is not evaluated since it's not logging in the console and I get this error:
{
"data": {
"addPlayerResponse": null
},
"errors": [
{
"message": "Cannot create property 'clientMutationId' on number '3'",
"locations": [
{
"line": 4,
"column": 3
}
],
"path": [
"addPlayerResponse"
]
}
]
}
Help?
Replace return cdxAdded; by return { cdxAdded }; (wild guess)