I am getting this error in Vue v2.4.1. and I'm not sure what it means:
[Vue warn]: component option "computed" should be an object.
My code looks like this:
export default {
data() {
return {
bookings: [],
games: [],
slots: [],
startTime: {
time: moment().format("YYYY-MM-DD")
}
};
},
components: {
'date-picker': myDatepicker,
'reserved' : Reserved
},
ready() {
this.prepareComponent();
},
mounted() {
this.prepareComponent();
},
methods: {
prepareComponent() {
this.getGames();
this.getSlots();
this.getBookings(this.startTime.time);
},
onDateChange(){
},
formatSlot(slot){
},
getGames(){
},
getSlots() {
},
getBookings(date){
},
isReserved(gameId,slotId){
},
getReservedBooking(gameId,slotId){
},
isPastTime(time, date){
},
getUrl(date,slot_id,game_id){
}
}
}
You are getting this error because, somewhere in your project, you are defining a Vue component with the computed option set to something that is not an object.
Check your project for any instances where this is happening and replace the value of the computed option with an object.
Most likely, you have mistakenly written computed() { ... } instead of computed: { ... }.
Here is the basic example of a computed property from the documentation.
Related
I'm creating a recursive method in Nuxt, can I do it?
Here is my component:
<script>
export default {
data() {
return {
items: [],
auxitems: [],
}
},
methods: {
orderRecursive(items, auxitems) {
items.data.forEach((element) => {
auxitems.push(element)
})
if (items.child.length > 0) {
this.orderRecursive(items.child, auxitems)
} else {
//
}
},
},
}
</script>
The struct items is like:
items= [
data: [{array}],
child: [{data, child}]
]
My intention is order all data in one array, then, I can show in view.
My method orderRecursive() is not working, can you tell me why?
I think im not understanding something properly or is an obvious oversight but I cant access values returned from my data() function in my Vue component's computed properties. From my below code i am trying to return a computed property newmessage but it is saying that message is undefined and so is everything else in data if i try. Appreciate any help :)
<script>
export default {
props:['alertdata'],
data () {
return {
message: 'hello',
expanded: [],
singleExpand: false,
alertHeaders: [
{
text: 'Rule Number',
align: 'start',
sortable: false,
value: 'RuleNumber',
},
{ text: 'Date', value: 'DateCreated' },
{ text: 'Amount', value: 'Amount' },
],
alerts: this.alertdata,
transactions : this.alertdata.detail,
}
},
computed: {
newmessage : function() {
return message.reverse()
}
}
}
</script>
Typically, inside methods, or computed properties or lifecycle handlers in Vue, you will use this to refer the component to which the method/computed/handler is attached. this refers to the context in which the function is currently executing.
in your case you need to add this before message
computed: {
newmessage : function() {
return this.message.reverse()
}
You need to refer to property defined in data with this keyword:
newmessage : function() {
return this.message.reverse()
}
I have a parent component that sends tabs selected by the user to the
child component
I want to watch the value passed by the parent
component in the child component
I am sure that the value of tabs
will change according to the parent component selection
In this code, console isn't work
child component
props: {
tab: ''
},
data: function () {
return
tabs: this.tab,
};
},
watch: {
tabs: function () {
console.log('tabs', this.tabs);
},
},
parent component
<table
:tab="0">
</table>
in
data: function () {
return
tabs: this.tab,
};
},
the tabs property takes only the initial value, I recommend to use a computed property instead of data :
props: {
tab: ''
},
computed:{
tabs(){
return this.tab;
}
},
watch: {
tabs: function () {
console.log('tabs', this.tabs);
},
},
or you could watch the prop directly :
props: {
tab: ''
},
watch: {
tab: function () {
console.log('tab', this.tab);
},
},
Note that you shouldn't use HTML native elements as vue component like table
if the prop is an object or an array you should add deep option like :
props: {
tab: ''
},
computed:{
tabs(){
return this.tab;
}
},
watch: {
tabs:{
handler: function () {
console.log('tabs', this.tabs);
},
deep:true
}
},
An alternate approach
props: {
tab: {
type: Number,
default: 0
}
},
data() {
return {
tabs: this.tab,
};
},
watch: {
tab(newVal) {
this.tabs = newVal;
console.log('tabs', newVal);
},
},
I want to display my getters in web but in console.log i have undefined errors. but in vue dev tool my getters are working.
my component code :
export default {
data: () => ({
items: [
{ text: 'Real-Time', icon: 'mdi-clock' },
{ text: 'Audience', icon: 'mdi-account' },
{ text: 'Conversions', icon: 'mdi-flag' },
],
}),
computed: {
Question(){
return this.$store.getters.getQuest
}
},
methods: {
Next(){
this.$store.commit('incrementIndex')
}
},
}
and this my vuex :
export default new Vuex.Store({
state: {
question: [],
index: 0
},
getters: {
getQuest: state => {
let a = state.question[state.index]
let answer = [...a.incorrect_answers, a.correct_answer]
return {
question: a,
answer: answer
}
}
},
In the getter you need to check whether all information is loaded yet. So this is roughly what I'd do:
export default new Vuex.Store({
state: {
question: [],
index: 0
},
getters: {
getQuest: state => {
let a = state.question[state.index]
if (a){
let answer = [...a.incorrect_answers, a.correct_answer]
return {
question: a,
answer: answer
}
} else {
return null
}
},
You are getting undefined errors because initially question is an empty array.
So state.question[state.index] is basically undefined
And then you are trying to access property incorrect_answers of undefined which will not work and will give undefined errors
I'm trying to setup dynamic binding of firebase node based on component data, like this
export default {
name: 'data',
props: {
api: {
type: String
},
section: {
type: String
}
},
firebase: {
apiData: {
source: (console.log('source', this.api), db.ref(this.api)),
asObject: true
}
},
updated: function() {
console.log('updated', this.api, this.section)
},
created: function() {
console.log('created', this.api, this.section)
}
}
My problem is, update event is fired, but apiData source update is not fired.
What is the correct way to do this with vuefire?
After some reading of vuefire docs, I came up with watch solution
data: function(){
return {
apiData: {}
}
},
created: function() {
this.$bindAsObject('apiData', db.ref(this.api))
},
watch: {
api: function() {
this.$bindAsObject('apiData', db.ref(this.api))
}
}