I have encountered runtime error:
TypeError: this.sourceExpression.connect is not a function
Problem is that stacktrace does not show anything useful, it points (randomly) to the last line of one of bundled components (in this case Leaflet's MarkerClusterGroup):
Uncaught TypeError: this.sourceExpression.connect is not a function
at ChildInterpolationBinding.connect (MarkerClusterGroup.Refresh.js:110)
at enqueueBindingConnect (MarkerClusterGroup.Refresh.js:110)
at ChildInterpolationBinding.bind (MarkerClusterGroup.Refresh.js:110)
at View.bind (MarkerClusterGroup.Refresh.js:110)
at If._show (MarkerClusterGroup.Refresh.js:110)
at If._update (MarkerClusterGroup.Refresh.js:110)
at If.conditionChanged (MarkerClusterGroup.Refresh.js:110)
at BehaviorPropertyObserver.selfSubscriber (MarkerClusterGroup.Refresh.js:110)
at BehaviorPropertyObserver.call (MarkerClusterGroup.Refresh.js:110)
at BehaviorPropertyObserver.setValue (MarkerClusterGroup.Refresh.js:110)
at If.descriptor.set [as condition] (MarkerClusterGroup.Refresh.js:110)
at Object.setValue (MarkerClusterGroup.Refresh.js:110)
at Binding.updateTarget (MarkerClusterGroup.Refresh.js:110)
at Binding.call (MarkerClusterGroup.Refresh.js:110)
at BehaviorPropertyObserver.callSubscribers (MarkerClusterGroup.Refresh.js:110)
at BehaviorPropertyObserver.call (MarkerClusterGroup.Refresh.js:110)
Cause of the issue was not related with file where stack trace was pointing to. Issue was syntax error (double dot: dto..firstName) in binding expression in one of Aurelia templates, something like:
<input value.bind="dto..firstName" />
Template had no relation or dependency to line of code (or even JS library) where stack trace was pointing to.
Related
When clicking in a select that lists items with really big integers as 738883988997898200, the select options hang in the screen and we can't proceed.
We can't proceed because we are inside a v-form that's validating that field, which doesn't have a value. This is happening because the v-select is not able to v-model the bigint.
Does anyone faced this before? and have a tip on how to deal with it ?
Bellow we have both of the errors that it console logged in the screen as Errors
[Vue warn]: Error in render: "TypeError: BigInt value can't be serialized in JSON"
found in
---> <VSelect>
<VForm>
<CampaignForm> at src/components/publisherCampaign/campaignForm.vue
<VCard>
<VTabItem>
<VTabsItems>
<VCard>
<PublisherCampaignAdd> at src/views/publisherCampaign/PublisherCampaignAdd.vue
<PublisherCampaign> at src/views/publisherCampaign/PublisherCampaign.vue
<Publisher> at src/views/publisher/Publisher.vue
<VMain>
<VApp>
<App> at src/App.vue
<Root> vue.runtime.esm.js:619
TypeError: BigInt value can't be serialized in JSON
genCommaSelection VSelect.ts:390
genSelections VSelect.ts:552
genDefaultSlot VSelect.ts:394
genInputSlot VInput.ts:217
genInputSlot VTextField.ts:291
genInputSlot VSelect.ts:475
genControl VInput.ts:155
genControl VTextField.ts:332
genContent VInput.ts:148
render VInput.ts:314
render vue-composition-api.esm.js:1817
activateCurrentInstance vue-composition-api.esm.js:1772
render vue-composition-api.esm.js:1816
VueJS 14
validate index.ts:263
VueJS 5
internalValue index.ts:185
VueJS 12
set VTextField.ts:149
setValue VSelect.ts:878
selectItem VSelect.ts:824
VueJS 4
click VSelectList.ts:170
VueJS 4
vue.runtime.esm.js:1897
One workaround is to convert the v-select's items to strings before binding it. You could use Array.prototype.map with the String constructor as the argument:
<script>
export default {
data: {
return {
items: [
BigInt(10e10),
BigInt(738883988997898200),
].map(String), 👈 // convert items to strings
}
},
}
</script>
<template>
<v-select :items="items"></v-select>
</template>
demo
I have the following data object in my Vue component:
data() {
return {
items: {}
}
},
I make a check to see if it is empty and display a message:
<tr v-if="items.data.length === 0"><p>There are currently no items.</p></tr>
This code works, however I get the following error messages in the console:
Error in render: "TypeError: Cannot read property 'length' of
undefined"
TypeError: Cannot read property 'length' of undefined
How can I check if an object is undefined? Sometimes the items object is filled with data and sometimes it isn't.
You need to ensure the data property is there first, and then check its length.
You can use the logical AND operator, which will return false if ‘items.data’ is coercible to false, so the second part, the ‘length’ check, won’t execute at all.
<tr v-if="items.data && items.data.length === 0"><p>There are currently no items.</p></tr>
I am trying to bind a click event on dynamically generated subheader v-list-tile Vuetify https://vuetifyjs.com/en/components/subheaders but each time I click the option an error appears.
vue.js:634 [Vue warn]: Error in v-on handler: "TypeError: handler.apply is not a function"
found in
---> <VListTile>
<VList>
<VCard>
<VApp>
<Root>
I have tried adding the methods forcibly (without passing object) and it works. It just triggers when it is passed to an object and dynamically rendered.
Here is a Codepen of the bug I encountered.
What I am expecting is to trigger the method that is called without triggering an error
My methods are inside the Data object. They should be at the same level.
In the Codepen example take the function name out of the data object and only left the number id.
By calling the function on the #click event and passing the number there made the method work.
This happened to me because I coded something similar on a HTML tag:
#something="colorList"
Where colorList was a javascript object array. Instead, you have to write a function the value is passed to, and set the value inside the function:
<... #something="updateColorList" ...>
And in methods
updateColorList(newColorParameter): {
this.colorList = newColorParameter
}
In my App.vue component, I have:
mounted () {
this.$store.dispatch('switchSideNav', false)
...
console.log('COOKIE: ', this.$store.state('cookieAgreement'))
if (!this.$store.state('cookieAgreement')
.....
this is raising an error:
Error in mounted hook: "TypeError: this.$store.state is not a function"
Checking Vuex on DevTools, I can see:
state
cookieAgreement:false
getters
getAllState: Object
cookieAgreement: false
why this.store is right with .dispatch(), but not with .state()?
feedback welcome
Because 'state' is not a function but 'dispatch' is a function of vuex store. State is an javascript object you can use it with dot notation like other javascript objects. Like this;
this.$store.state.cookieAgreement // This returns your value
this.$store.state('cookieAgreement') // This returns error since .state is not a function its an object
Even if this prop got a warning , it's running fine ... but WHY this warning on prop locale ?
[Vue warn]: Invalid prop: type check failed for prop "locale". Expected Object, got String.
<PayPal v-show="displayPaypalButtons" :buttonStyle="bStyle" locale="fr_FR" :client="credentials" amount="50.00" currency="EUR" env="sandbox" :invoice-number="invoiceNumber"></PayPal>
Please use: locale="fr_FR" OR v-bind:locale="fr_FR".