Starting my journey with Vue, I have been finding my way through the documentation and seeking support from the Vue community on Stack Overflow. Slowly but steadily, I am gaining a better understanding of how to create more complex components.
The issue I am facing pertains to a custom select component where the data for the selected option is accurate, but the displayed HTML is not reflecting it correctly. This problem arises when the custom select component is nested within multiple other components in my application.
To provide a clear example, I have created a Minimal Working Example which can be accessed via Code Sandbox. Each component is organized into its own file for easier readability.
Description of the Component:
https://i.sstatic.net/T4Xwf.png
The purpose of this component is to act as an advanced data filter. It accepts an object that mimics a database structure, where each key represents the "id" of its corresponding value ("record"). The component allows users to filter based on the keys (properties/fields) of the record.
The main top-level component is called AdvancedFilterTable, which enables users to dynamically add and remove filters represented by AdvancedFilterRows.
A filter row consists of 5 simple components:
- logic: represents the filter condition (
AdvancedFilterSelectLogic) - function: specifies the operation to be performed on the field (
AdvancedFilterSelectFunction) - property: indicates the field to be filtered on (
AdvancedFilterSelectProperty) - conditional: determines the test to apply to each record's specified field (
AdvancedFilterSelectConditional) - value: the value against which the conditional statement is tested (
AdvancedFilterInput)
For example:
{ logic: 'and', function: 'identity', property: 'x', conditional: 'gt', value: 5 }I recently introduced a feature which caused a bug - dynamic options for AdvancedFilterSelectFunction and AdvancedFilterSelectConditional based on the type of AdvancedFilterSelectProperty. When a specific property is selected, such as 'x' which corresponds to an array of numbers, the available options should change accordingly in the function and conditional selectors. However, if a certain function like 'mean' is applied (which changes the data type), the available conditionals should be adjusted again.
In the provided MWE, I have dummy data structured as follows:
let records = {
a: { x: 1, y: "a string", z: [1, 2, 3, 4] },
b: { x: 2, y: "strange?", z: [1, 2, 4] },
c: { x: 3, y: "starts w", z: [1, 2, 3, 4] },
d: { x: 10, y: "some let", z: [1, 2, 4, 5, 6, 7, 8] },
e: { x: 2, y: "? qwerty", z: [1, 40] }
};
Where 'x' is of type number, 'y' is a string, and 'z' is an array of numbers.
Steps to Reproduce the Bug:
- Open the MWE link here: Code Sandbox https://i.sstatic.net/qZUtp.png
- Click the green plus icon to add a new filter
https://i.sstatic.net/Ldy0T.png
- Change the property selection from 'x' to 'z'
https://i.sstatic.net/EtQgw.png
Upon examining the components, all the relevant data seems to be set accurately. Even the function selector and the conditional selector dynamically update to include options specific to array-type data. However, the display still shows 'x'. Attempting to reset the selection back to 'x' does not work as it remains stuck on 'x'...
All the data of the custom select components flow through the various encapsulating components according to the technique explained in Vue2: handling multi-child prop synchronization with models. An illustrative fiddle of the solution can be found at: https://jsfiddle.net/SumNeuron/ejq86c73/9/
Solution: