Issue with Vue property's sub-object not inheriting methods from prototype

Question

Issue with Vue property's sub-object not inheriting methods from prototype

Incorporating Vue into my project to showcase an intricate hexagonal grid has been quite challenging. Utilizing the Honeycomb library for handling the grid data in memory has proven to be both beneficial and complex. The library introduces a specialized Grid object that not only stores the essential data but also offers a wide range of manipulation methods, drawing inspiration from the functionalities of a typical Array.

Initially, I attempted to pass the grid object as a property to my Vue component:

@Component
export default class TileMap extends Vue {
@Prop() private grid!: Grid;

Unfortunately, I encountered an issue where all the methods associated with the Grid object seemed to get lost within my Vue component.

Upon creating the Grid object, the methods were present in the prototype.
However, when utilizing the Grid property within my component, the methods were mysteriously absent from the prototype.

Is this behavior to be expected? Should I steer clear of utilizing properties for objects with extensive properties and methods?

javascript typescript vue.js

Answer 1

Answer №1

Regrettably

The requirement is that the object must be plain: native objects like browser API objects and prototype properties will not be considered. It is advisable to keep data as pure data - observing objects with their own stateful behavior is not recommended.

source

I haven't come across any effective workaround for this situation.

Should we store things in the window object?

Perhaps wrapping grid logic in a service with internal state?

Or encapsulate grid in a function and pass it to a child component as a prop?

The latter option surprisingly works well.

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import Test from './Test.vue'
import { Vue, Component, Prop, Provide, ProvideReactive } from "vue-property-decorator";

@Component({
    components : { Test }
})
export default class App extends Vue {
    @Provide() private gridFunc: () => Grid = null;

    mounted() {
        const grid = defineGrid().rectangle({ width: 4, height: 4 });
        this.gridFunc = () => grid;
    }
}

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import { Vue, Component, ProvideReactive, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class Test extends Vue {
    @Prop() private gridFunc!: () => Grid<any>;
    
    @Watch('gridFunc')
    onGridChange(val: string, oldVal: string) {
        console.log(this.gridFunc());
    }
}

Answer 2

Regrettably

The requirement is that the object must be plain: native objects like browser API objects and prototype properties will not be considered. It is advisable to keep data as pure data - observing objects with their own stateful behavior is not recommended.

source

I haven't come across any effective workaround for this situation.

Should we store things in the window object?

Perhaps wrapping grid logic in a service with internal state?

Or encapsulate grid in a function and pass it to a child component as a prop?

The latter option surprisingly works well.

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import Test from './Test.vue'
import { Vue, Component, Prop, Provide, ProvideReactive } from "vue-property-decorator";

@Component({
    components : { Test }
})
export default class App extends Vue {
    @Provide() private gridFunc: () => Grid = null;

    mounted() {
        const grid = defineGrid().rectangle({ width: 4, height: 4 });
        this.gridFunc = () => grid;
    }
}

import { defineGrid, Grid, GridFactory } from 'honeycomb-grid'
import { Vue, Component, ProvideReactive, Prop, Watch } from "vue-property-decorator";

@Component({})
export default class Test extends Vue {
    @Prop() private gridFunc!: () => Grid<any>;
    
    @Watch('gridFunc')
    onGridChange(val: string, oldVal: string) {
        console.log(this.gridFunc());
    }
}

Issue with Vue property's sub-object not inheriting methods from prototype

Answer №1

Similar questions

In the setup function, the composition API calculates the return value of the computed property before it is

Ways to steer clear of utilizing subscriptions and BehaviorSubject.value through a declarative method within rxjs

Obtain the specific generic type that is employed to broaden the scope of a

Setting character limits within textareas based on CSS classes in a dynamic manner

Navigating through nested objects using Rxjs

Utilizing twig variables with Vue.js within Symfony 4

What is the method for HTML inline handlers to retrieve the global window object and the variables contained within it?

What is the best way to move between components within the same parent class using UI router in Angular 6?

Tips for resolving the issue of invalid functions as a child component in React

Sorting customization within a complex nested array structure

In Chrome, the computed style of background-position is returned as 0% 0%

Is there a way to selectively update specific keys within existing objects in Mongodb without affecting the rest of the

403 Malicious Path Middleware Error in Express.js

Guide on implementing hover effects in React components

Show information in a React Native element | Firebase

Why does my event dispatch only run once upon form submission in Svelte JS?

Encountering an issue when trying to download a PDF from an Angular 6 frontend using a Spring Boot API - receiving an error related to

Learn the process of generating an array from a computed property array field in Vue

Express.js router defining a module issue

What are the best practices for securely storing SSL certificates and public/private keys?