I installed PrimeVue library for my Vue.js app that it's inside of a .NET solution, and when I try to render the Steps component from PrimeVue v2 text, the Object Object error appears
Tag used for render the component:
<stepper-component></stepper-component>
The configuration of the Step component in the .cshtml file.
<script asp-location="Footer" asp-order="300">
Vue.component('stepper-component', {
template: `
<div>
<Steps :models="items" :activeIndex="currentStep"></Steps>
<button v-if="currentStep > 0" @@click="prevPage">Anterior</button>
<button v-if="currentStep < items.length - 1" @@click="nextPage">Siguiente</button>
<button v-if="currentStep === items.length - 1" @@click="complete">Finalizar</button>
</div>
`,
data() {
return {
items: [
{ label: 'Personal', to: '/steps' },
{ label: 'Seat', to: '/steps/seat' },
{ label: 'Payment', to: '/steps/payment' },
{ label: 'Confirmation', to: '/steps/confirmation' }
],
currentStep: 0,
formObject: {}
}
},
methods: {
nextPage() {
if (this.currentStep < this.items.length - 1) {
this.currentStep++;
window.Router.push(this.items[this.currentStep].to);
}
},
prevPage() {
if (this.currentStep > 0) {
this.currentStep--;
window.Router.push(this.items[this.currentStep].to);
}
},
complete() {
this.$toast.add({ severity: 'success', summary: 'Order submitted', detail: 'Dear, ' + this.formObject.firstname + ' ' + this.formObject.lastname + ' your order completed.' });
},
isActive(item) {
if (item.route) {
let currentPath = window.Router.currentRoute.path;
return item.route === currentPath;
}
return false;
},
}
});
</script>
What I try recently was to isolate the problem, initializing a pure vue app and render the Steps component, and it works. The difference is that in the pure Vue App I render the Steps component inside a template and calling the property "model" instead of :items="items" how I called in the .cshtml razor file. You may ask why the difference, well, it's because if i use :model="items" in the .cshtml file, it renders lines of comments.
Proof of the Object object in the .cshtml
