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
Related
When using Vuex and computed property it returns this error.
Im out of ideas as I tried for several hours to fix it.
it seems the data is not available when it tries rendering the template. The strange thing is, when I don't use splice the error doesn't show up.
error
Vue warn]: Error in render: "TypeError: Cannot read property 'slice' of null"
template
v-for="expert in experts"
:key="expert.name"
#click="goToProfile(expert.id)">
<div class="experts__img">
<LazyImage
:src="avatar(expert.file)"
:srcset="srcset(expert.file)"
:alt="expert.name"
:width="375"
:height="500"
:cover="true"/>
</div>
script
computed: {
experts () {
return this.$store.getters.experts.slice(0,3);
},
If I alternatively use the splice in the frontend section I get the same error
v-for="expert in experts.splice(0,3)"
:key="expert.name"
#click="goToProfile(expert.id)">
The error message indicates that in this code:
computed: {
experts () {
return this.$store.getters.experts.slice(0,3);
},
},
The experts Vuex getter is null. You need to ensure that the getter returns a non-null value at the time when the component is being rendered. Perhaps you didn't initialize some data properly initially? Alternatively you can write defensive code which handles the case when experts is null so you don't trigger the error.
You didn't provide your code for the experts Vuex getter, so I can't give you any further help.
Ok, so figured that I had experts: null in my state, but when I change it to experts:[] the error disappears but then still the content doesn't render at all now.
why doesn't the content show up once loaded? I thought computed with async would render once loaded!??!
Tinkering with Vue for the first time, I have a rather innocuous input like so:
<input type="number" name="quantity" v-model="quantity" />
This lives inside a component.
When quantity is set on the prop object, I get this error (when changing the value in the input):
Vue.component('my-product', {props: {quantity : {default: 1}}});
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "quantity"
But when quantity is set on the data object as demonstrated on the Vue tutorial documentation, I get this error:
Vue.component('my-product', {data: {quantity : 1}});
[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.
I'm at a loss. This field has no bearing on the parent views (vues?) so perhaps I am simply misunderstanding how to set this up.
Oh it's right there in the error text...
Vue.component('my-product', {
data: function(){
return {quantity : 1}
}
});
I'm working with vuejs 2.5.16, vuesax 3.5.7 and webpack template from vue-cli. When i utilize a vs-select component im my form, the options are not visible, the list size seems to be correct, but the values are all null. And in the Dev Tools the root node gets doubled.
Any sugestions?
<vs-col vs-w="2">
<label for="sexo">Sexo</label>
<vs-select v-model="pessoa.sexo">
<vs-select-item v-bind:value="opt.value"
v-bind:text="opt.text" v-bind:key="index"
v-for="(opt, index) in sexo_opt"/>
</vs-select>
data(){
return{
pessoa.sexo:'M',
sexo_opt: [{text:'Masculino',value:'M'},{text:'Feminino',value:'F'}]
}
}
Because pessoa.sexo isn't a valid object key, the dot is not allowed, if you type in your console
var a = {name:"tom",user.friends:3}
you'll get
Uncaught SyntaxError: Unexpected token .
now..you can change this to just pessoa or use a nested object and you can access to it as pessoa.sexo
pessoa : {sexo : "M"}
I hope I helped you..
I want to pass this prop as a string:
<list-view :avatar="pictures"></list-view>
But I think Vue thinks I am trying to call a method because I am getting these warnings:
[Vue warn]: Property or method "pictures" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
[Vue warn]: Invalid prop: type check failed for prop "avatar". Expected String, got Undefined.
How can I pass "pictures" as a string?
Vue.component('list-view', {
props: {
avatar: { type: String, required: true },
},
template: `<div>{{ avatar }}</div>`,
});
var app = new Vue({ el: '#app' });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<list-view :avatar="pictures" ></list-view>
</div>
Right now, Vue is trying to find a variable named pictures to pass as the property value to the child component.
If you want to specify a string value in that inline expression, you can wrap the value in quotes to make it a string:
<list-view :avatar="'pictures'"></list-view>
Alternately, as #Zunnii answered below, if the value being passed is really just a static string, you can simply omit the v-bind colon shorthand:
<list-view avatar="pictures"></list-view>
This way, the avatar prop of the child component will be assigned the string value "pictures".
If you really want to pass static string, you can just pass string directly without v-bind
<div id="app">
<greeting text="world"></greeting>
</div>
then in JS file
Vue.component('greeting', {
props: ['text'],
template: '<h1>Hello {{ text }}!</h1>'
});
var vm = new Vue({
el: '#app'
});
JSFiddle => https://jsfiddle.net/dpLp4jk8/
:avatar="pictures" //vue treat pictures as a variable or computed properties
By default vue treat pictures as a variable or computed properties and vue search locally and doesn't find and throw an error. So what you have to do is tell vue externally that it is a string not a variable or computed properties. So enclose in quotes.
:avatar="'pictures'" // I guess it will work
In laravel we can pass string as shown below
function authUserCurrency(){
return '$';
}
<service :authusercurrency="'{!!authUserCurrency()!!}'"></services>
Vue.js Template
props:{authusercurrency:String},
OR
props:['authUserCurrency'],
In my case I needed to pass static string along with dynamic property value.
So did as below.
<home-card :title="'By' + post.author.name "></home-card>
If I pass an array of objects using props in Vue 2 and on this array I use the v-for directive, view does not get updated if one of the array elements get removed.
This seems to work only if the v-for elements are declared as data, but my component needs to receive props...
In the example below you can see that the elements in the services array are indeed removed, but the v-for isn't triggered.
I'm pretty sure I'm doing here something wrong...
Vue.component('location-service-list', {
props: ['services'],
template: '<div>{{ services }}<div v-for="(service, index) in services">{{ service.id }} - {{ service.name }} <a #click.prevent="remove(index)">remove</a></div></div>',
methods: {
remove(index) {
this.services.splice(index, 1);
console.log(this.services);
},
}
});
const app = window.app = new Vue({
el: '#admin-app'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.8/vue.js"></script>
<div id="admin-app">
<location-service-list :services='[{"id":1,"name":"Test 1"},{"id":2,"name":"Test 2"}]'></location-service-list>
</div>
Try defining your servicesList inside the root component as follows:
const app = window.app = new Vue({
el: '#admin-app',
data: {
servicesList: [{"id":1,"name":"Test 1"},{"id":2,"name":"Test 2"}]
}
});
And your template as:
<div id="admin-app">
<location-service-list :services='servicesList'></location-service-list>
</div>
Now it will work alright without any issues. It was not working earlier because you passed it as a constant / immutable object (JSON string in the parent template which always evaluates to the same value whenever the parent template re-renders).
Technically you are not supposed to change objects passed via props in the child component. If you do the same to a string value that is passed via props, you will get an error message like:
[Vue warn]: Avoid mutating a prop directly...
To process this remove action from parent component, you may refer to the answer under this question: Delete a Vue child component
The jsFiddle in that answer provides a way to send an event from child component to parent component, so that the appropriate child component can be deleted.