In my application, I have a straightforward structure consisting of a table and a page for creating a new item. To navigate to the create page and pass parameters, I utilize a button on the main page.
initNewRow(): void {
let someData: string = 'someText';
this.$router.push({
name: 'catalog-create___en',
params: { someData: someData }
});
}
The goal is to pass certain parameters during navigation without having a dedicated route/page that needs to be displayed in the menu. Instead, there should only be a page with a table (without a specific page for item creation).
{
id: 8,
label: 'menuitems.Catalog.text',
link: '/catalog/main',
icon: 'ri-eye-line',
meta: {
middleware: ['router-auth']
}
},
Upon opening the page for creating an item, I encounter issues with the props not being available or properly initialized.
@Component({
name: 'Create',
props: ['someData']
})
export default class Catalog extends Vue {
@Prop({ required: true })
someData!: any;
constructor() {
super();
this.someData = this.$route.params.someData;
console.log(this.someData);
}
I'm currently facing an error stating that I should avoid mutating a prop directly, but rather use data or computed properties based on the prop's value. The specific error message reads: "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: "someData""