I'm new at Vue CLI 3. I just created a new project using vue create and tried to add some dataproperties in the export defaultsection of the App.vuefile using the syntax of the Vue.js tutorial,
data: {
people: ["Mary", "Lluis", "Pepe"]
}
But it doesn't work an error arises that says data property must be a function. I tried instead,
data: function() {
people: ["Mary", "Lluis", "Pepe"]
}
But it doesn't work neither. Do you know how I should do it and why there's such a difference in syntax with the Vue.js Tutorial? Thanks.
You forgot to return the value
data: function() {
return {
people: ["Mary", "Lluis", "Pepe"]
}
}
Related
I was using VueJS in browser mode and am now trying to switch my code to a VueJS SPA and vue-router. I've been stuck for hours with a $refs not working anymore.
To interact with my Google Charts, I was using an absolute reference to the graph (this.$refs.villesChart) to get selected data like that:
computed: {
eventsprox() {
let eventsprox = {
select: () => {
var selection = "";
if (this.$refs.villesChart) selection = this.$refs.villesChart1.chartObject.getSelection();
if (selection.length) {
var row = selection0[0].row + 1;
this.code_commune = this.dataprox[row][4];
this.changerville(this.code_commune, this.dataprox[row][0]);
}
return false;
},
};
return eventsprox;
}
HTML code for graph:
<GChart type="BarChart" id="villesChart" ref="villesChart" :data="dataprox" :options="optionsprox" :events="eventsprox"/>
I don't know why, but in browser mode, this.$refs.villesChart is a component:
[1]: https://i.stack.imgur.com/xJ8pV.png
but now it is a proxy object, and lost its chartObject attribute:
[2]: https://i.stack.imgur.com/JyXrL.png
I'm really confused. Do you have an idea why?
And if I use the proxy object, then I get a Vue warning "Avoid app logic that relies on enumerating keys on a component instance" and it is not working in production environment.
Thanks a lot for your help!!
After hours of testing different solutions, I finally found a solution working with Vue3 and Vue-google-chart 1.1.0.
I got rid of "refs" and put the events definition and code in the data section of my Vue 3 app (instead of computed) and accessed the chart data through a component variable I used to populate it.
Here is my event code where this.dataprox is my data table for the chart:
eventsprox: {
'click': (e) => {
const barselect = parseInt(e.targetID.split('#')[2]) + 1;
this.code_commune = this.dataprox[barselect][4];
this.nom_commune = this.dataprox[barselect][0];
this.changerville(this.code_commune, this.nom_commune);
}
},
My Gchart html code:
<GChart type="AreaChart" :data="datag" :options="optionsg" :events="eventsprox"/>
I hope it can help!
I'm stuck since a while on this problem now and I'm struggling to find answers or peoples that have experienced the same problem.
Also, I'm not a native English speaker and I'm new to programming, so sorry if it's not clear / if my approch is dumb as f
I decided to turn the Wordpress of my company to headless (on Nuxt). Everything was pretty fine until I tried to internationalized the app. The best solution (I think) to manage this task is to use nuxt-i18n, a tool to properly translate the app (strings, paths etc). But this solution seems to not be very compatible with data fetched from the Rest API.
For now I'm trying to passing the data from single page like that :
<script>
import SwitchL from '~/components/LanguageInput.vue'
export default {
components: {
SwitchL,
},
data() {
return {
fetchRestFr: null,
fetchRestEn: null,
i18nData: null,
}
},
i18n: {
messages: {
// help
}
},
methods: {
fetchSomeData() {
// Get page data in French
let fetchRestFr = this.$axios.$get(`https://www.company-site.com/wp-json/wp/v2/pages?include=42&lang=fr`);
// Get page data in English
let fetchRestEn = this.$axios.$get(`https://www.company-site.com/wp-json/wp/v2/pages?include=42&lang=en`);
// Assign data to null variables
this.fetchRestFr = fetchRestFr[0]
this.fetchRestEn = fetchRestEn[0]
// Build the i18n object
this.dataToI18n();
},
dataToI18n() {
if (this.fetchRestFr && this.fetchRestEn) {
let fr = this.fetchRestFr
let en = this.fetchRestEn
let data = {
messages: {
fr,
en
}
}
this.i18nData = data
}
},
},
created() {
this.fetchSomeData();
},
}
</script>
An other approch was to use the tag outside the template section like so :
<i18n>
// Inject the data generated from a function
{
"en": {
"data": "here"
},
"fr": {
"data": "ici"
}
}
</i18n>
But I don't find any solution to dynamically inject JSON here.
Last solution is to make things to preper way, by creating JSON file for i18n to referencing, but I think It will be pretty hard for me to do this, and to manage this on long term.
If you have advice, thoughts on this I will be very grateful !
You do usually use some JSON files directly. They will be stored into /locales/fr.json with something like this
{
"here": "ici"
}
Then, you'll access it into your template with
<template>
<p>{{ $t('here') }}</p>
</template>
And it will handle the fr/en switch by the several ways available (manual switch, checking browser's locale, URL's path, cookie etc).
You can check nuxt-i18n's documentation for this and get a proper simple setup quickly here: https://i18n.nuxtjs.org/
Usually, you won't need to use the i18n tag anymore but if you still need to, you can do as explained here: https://i18n.nuxtjs.org/per-component-translations
So I'm using Element Vue, I need to get access to a method or to the value of the
acceptedDates
export default {
data() {
return {
acceptedDates: [],
pickerOptions1: {
disabledDate(time) {
return moment(time).isBetween(this.acceptedDates[0], this.acceptedDates[1]);
}
}
};
},
methods: {
//setting acceptedDates method...
}
I get a ReferenceError for this.accptedDates or even without using this. How do you do this?
Update
Thank you for the first anwsers, but I still can't figure it out.
I created this fiddle for you to see: https://jsfiddle.net/05nru5xq/13/
If you go to http://element.eleme.io/#/en-US/component/date-picker you will find that disabledDate is a Function in PickerOption.
Now that I know exactly what you are after, I've updated accordingly to your example https://jsfiddle.net/05nru5xq/31/
some points on your code:
never use capital to name methods, capital letter first is to name Object that can be created with the new attribute;
today is not a moment object so you can't call isBetween on it
from the docs you need to name your options as there's 3 of them, hence specifying the option :picker-options="{ disabledDate: betweenOneWeek }"
data is just a place to hold variables, don't put methods there.
As a side note:
I've done the same (bought it for me) and I'm not in any way affiliated with them, just a happy customer. If you want to know VueJs well enough and quick, try this Udemy course, it's pretty good and worth all the money
In the data section you can define variables with functions but you're not able to do things like you did. Why? It's simple. You're using this which binding to pickerOptions1 object, not data. Even when you use arrow function in object it won't work as well because in that case it will return window object.
Those operations on data you can move to separate function and in my opinion it would be the best way.
For example you can do something like that:
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!',
customMessage: 'Test ',
testFunction() {
this.customMessage += this.message;
alert(this.customMessage);
}
},
mounted() {
this.testFunction();
}
})
https://jsfiddle.net/mxuh7c9p/
or more suitable to your case:
new Vue({
el: '#app',
data: {
acceptedDates: [],
pickerOptions1: null,
},
methods: {
getDisabledDate(time) {
return moment(time).isBetween(this.acceptedDates[0], this.acceptedDates[1]);
},
setAcceptedDates() {
const disabledDate = this.getDisabledDate(time);
// do something
}
},
mounted() {
//this.getDisabledDate();
}
})
https://jsfiddle.net/mxuh7c9p/13/
I'm trying to use Vuejs with some plugins.
There are two components
Vue.component('element-one', {
template: '<h1>Element ONE</h1>',
}
And the second one :
Vue.component('element-two', {
template: '<h1>Element TWO</h1>',
}
I want to be able to display the compiled version of element-one in element-two, I know there is something like:
var element = Vue.component('element-one');
new element().$mount().$appendTo('body');
But I'd love to have just the 'mounted' version, and not append it to any place.
Something I can play with in console.log ??
I received an answer from https://gitter.im/vuejs/vue. You can get the element by
new element().$mount().$el
i want to check the returned value of $http.get() but i get undefined value. Here is my vue js code:
var vm = new Vue({
el: '#permissionMgt',
data: {
permissionID: []
},
methods:{
fetchPermissionDetail: function (id) {
this.$http.get('../api/getComplaintPermission/' + id, function (data) {
this.permissionID = data.permissionID; //permissionID is a data field of the database
alert(this.permissionID); //*****this alert is giving me undefined value
});
},
}
});
Can you tell me thats the problem here?.. btw $http.get() is properly fetching all the data.
You need to check what type is the data returned from the server. If #Raj's solution didn't resolve your issue then probably permissionID is not present in the data that is returned.
Do a colsole.log(data) and check whether data is an object or an array of objects.
Cheers!
Its a common js error. Make the following changes and it will work.
fetchPermissionDetail: function (id) {
var self = this; //add this line
this.$http.get('../api/getComplaintPermission/' + id, function (data) {
self.permissionID = data.permissionID; //replace "this" with "self"
});
},
}
the reason is this points to window inside the anonymous function function()
This is a well known js problem. If you are using es2015 you can use arrow syntax (() => { /*code*/ }) syntax which sets this correctly