Organizing components that display slightly more intricate data: Choosing between storing data, passing props, or combining into a single component

Question

Organizing components that display slightly more intricate data: Choosing between storing data, passing props, or combining into a single component

I am looking to develop a component that enables users to edit data for a mathematical classification model.

The interface concept may resemble the following:

interface MathModel {
  name: string;
  article: ArticleDescription;
  criteria: Criteria;
  coefficients: Coefficient[];
  interpretation: ResultInterpretation;
}

interface Coefficient {
   value: number; // not equal to 0! how to validate?
}

interface Interpretation
{
   description: string
   interpretationItems: InterpretationItem[]
   // ...
}

interface InterpretationItem {
  scoreMin: number
  scoreMax: number
}

In my initial attempt, I tried creating separate components to manage each property of MathModel. For example: MathModelCoefficientList, MathModelInterpretation components.

However, the interpretation component requires additional information that is not included in the Interpretation type. It requires knowledge of the sum of all coefficient values. This is because InterpretationItem scoreMax should not exceed the total sum of coefficients.

Additionally, InterpretationItems are interconnected - each InterpretationItem should represent a distinct score range.

Therefore, simple v-model components cannot be used.

Potential solutions:

Within MathModelComponent, create a computed variable

const coefficientsValuesSum = computed( () => ...)

const nonOverlappingInterpretationItems = ...

then

<MathModelInterpretation v-model=modelValue.interpretation :coefficientsValuesSum=coefficientsValuesSum :nonOverlappingInterpretationItems=nonOverlappingInterpretationItems>

<MathModelInterpretationList v-model=modelValue.interpretationItems :coefficientsValuesSum=coefficientsValuesSum :nonOverlappingInterpretationItems=nonOverlappingInterpretationItems>

<MathModelInterpretationItem v-model=modelValue[i] :coefficientsValuesSum=coefficientsValuesSum :nonOverlappingInterpretationItems=nonOverlappingInterpretationItems[i]>

While it allows us to see dependencies of subcomponents, handling numerous props raises concerns.

Create a store containing MathModel. Dependencies are less explicit. Moreover, is it acceptable to pass an index to a component which then retrieves data from the store?

<MathModelInterpretationItem :interpretationItemIndex=i>

It's not such a complicated component. Avoid dividing it. Maintain Everything in a Single Component.

Extra:

Extra 1) Validation. After splitting into subcomponents, validating before submission becomes more challenging, correct?

Extra 2) I could construct a TypeScript class MathModel with a method sumAllCoefficientValues(). How can TypeScript classes and their methods connect with the Vue reactivity system? Does this approach make sense?

typescript vue.js

Answer 1

Answer №1

Special thanks to Estus Flask for helping clarify the issue with mutating object properties and arrays in a trap-like situation.

I am still searching for the best approach to creating a component that manages a list of objects. Let's imagine a scenario where we have a list of coefficients with various complexities:

Let's review the MathModel type:

interface MathModel {
  coefficients: Coefficient[];
  //...
}

interface Coefficient {
   value: number;
   x: number;
   y: number;
   yetAnotherProperty: SomeObject;
}

In our MathModel.vue file:

<template>
 ...
 <CoefficientsList :mathModel.coefficients >
<template>

So, how can the CoefficientsList inform the parent MathModel component about changes to a property within the passed array? And how can we ensure immutability of each element within an array containing nested objects?

One solution could involve CoefficientsList making a deep copy of the prop array and emitting an event with a callback containing the updated deep copy. We could even incorporate the usage of v-model:

<CoefficientsList v-model:mathModel.coefficients>

This approach requires creating a deep copy and passing potentially large data payloads in callbacks. Additionally, we would need to monitor any changes within the deep copy to emit an update:modelValue event. Are there other considerations to keep in mind?

Alternatively, I have contemplated allowing the parent component to mutate its state by receiving events such as: elementChange(newElement, index), elementRemoved(index).

However, given the nested structure of the new Coefficient type, it seems likely that deep copying will still be necessary—especially if we intend to use v-model on

coefficient[index].yetAnotherProperty

to link it to another component like YetAnotherComponent.

Answer 2

Special thanks to Estus Flask for helping clarify the issue with mutating object properties and arrays in a trap-like situation.

I am still searching for the best approach to creating a component that manages a list of objects. Let's imagine a scenario where we have a list of coefficients with various complexities:

Let's review the MathModel type:

interface MathModel {
  coefficients: Coefficient[];
  //...
}

interface Coefficient {
   value: number;
   x: number;
   y: number;
   yetAnotherProperty: SomeObject;
}

In our MathModel.vue file:

<template>
 ...
 <CoefficientsList :mathModel.coefficients >
<template>

So, how can the CoefficientsList inform the parent MathModel component about changes to a property within the passed array? And how can we ensure immutability of each element within an array containing nested objects?

One solution could involve CoefficientsList making a deep copy of the prop array and emitting an event with a callback containing the updated deep copy. We could even incorporate the usage of v-model:

<CoefficientsList v-model:mathModel.coefficients>

This approach requires creating a deep copy and passing potentially large data payloads in callbacks. Additionally, we would need to monitor any changes within the deep copy to emit an update:modelValue event. Are there other considerations to keep in mind?

Alternatively, I have contemplated allowing the parent component to mutate its state by receiving events such as: elementChange(newElement, index), elementRemoved(index).

However, given the nested structure of the new Coefficient type, it seems likely that deep copying will still be necessary—especially if we intend to use v-model on

coefficient[index].yetAnotherProperty

to link it to another component like YetAnotherComponent.

Organizing components that display slightly more intricate data: Choosing between storing data, passing props, or combining into a single component

Answer №1

Similar questions

Retrieve the thousand separator for numbers using Angular in various languages

AngularFirestore: It seems that the 'id' property is not available on the 'QueryDocumentSnapshot<any>' type

The JSX component is unable to utilize the object

Obtaining a string union value dynamically during execution

What is the best way to transform private variables in ReactJS into TypeScript?

Angular2 - error in long-stack-trace-zone.js at line 106: Zone variable is not defined

How can you use Vue.js with NW.js to seamlessly open a link in the user's preferred browser?

The inconsistency between the overload signature and the function implementation is illogical

Learn how to retrieve data prior to rendering with Vue 3 and the composition api

There seems to be a complete absence of rendering in this particular vue

implement a data update feature in a Vue application using methods and Axios to manipulate

List in Angular remains empty

Working with Angular: Managing an Array of Objects

Upon reacting with Typescript, the window will transition to the homePage, however, it will also reset

Utilizing webpack, gulp, and typescript to efficiently incorporate jQuery plugins

Leveraging the power of Vue.js by incorporating various instances of pagination

What is the best way to showcase a route parameter in the context of Vue.js and Firebase integration

The loading spinner isn't appearing while the function is running

Tips for Dealing with Empty Rows in Arrays

Is there a way to verify the selected navigation item in the console?