vjsf.js library: Dynamic form field display triggered by selection in another field

I have implemented the vjsf library for my vue.js form, as seen here: . I am currently working on a specific functionality where the field memberStatusChange should only be displayed when a certain value of the callDisposition select field is chosen. However, I am facing issues with this implementation and would appreciate any guidance on achieving this. The form schema is provided below. Thank you.

{
                "id": "https://test.com",
                "$schema": "http://json-schema.org/draft-06/schema#",
                "description2": "MemberPrequalification",
                "type": "object",
                "required": [             
                   "callDisposition"
                ],

                "properties": {

                   "callDisposition": {
                      "type": "string",
                      "title": "Call Disposition",
                      "x-summary": true,
                      "x-display": "custom-component",
                      "enum": [
                         "Did not call",
                         "Engaged - Callback Requested - Snoozed",
                         "Engaged - Completed",
                         "Engaged - Not Completed",
                         "Engaged - No Action Needed",
                         "Engaged - Member Declined"

                      ]
                   },
                   "memberStatusChange": {
                      "type": "string",
                      "title": "Member Status Change",
                      "x-if": "parent.value.callDisposition?.toString() === 'Engaged - Completed'",
                      "x-display": "custom-component",
                      "enum": [
                         "Agreed",
                         "Declined",
                         "Ineligible - Medical Criteria",
                         "Ineligible - Coverage",
                         "Deceased"
                      ]
                   }

                }
             }
javascriptvue.jsvuetify.js

Answer №1

I came up with this workaround instead of utilizing the built-in functionality of a library: I was unable to figure out how to dynamically use x-if based on the value of another input. In the end, I attached a function to the input value.

Introduced displayStatus() for the change event:

                <v-jsf
                  :disabled="context.disabled"
                  :model-key="context.modelKey"
                  :options="evaluateOptions(context)"
                  :required="context.required"
                  :rules="context.rules"
                  :schema="JSON.parse(JSON.stringify(context.schema))"
                  :value="context.value"
                  @change="displayStatus"
                  @input="context.on.input">
              </v-jsf>

Values of Options:

     options: {
        context: {
           displayStatus: false,
           memberStatusChangeActive: "Completed"
        },
        summary: false,
        disableAll: false,
        markdownit: {
           html: true
        }
     }

Schema:

 {
                  "id": "https://test.com",
                  "$schema": "http://json-schema.org/draft-06/schema#",
                  "description2": "MemberPrequalification",
                  "type": "object",
                  "properties": {
                     "callDisposition": {
                        "type": "string",
                        "title": "Call Disposition",
                        "x-summary": true,
                        "x-display": "custom-component",
                        "enum": [
                           "Did not call",
                           "Engaged - Callback Requested - Snoozed",
                           "Completed"       
                        ]
                     },
                     "memberStatusChange": {
                        "type": "string",
                        "x-summary": true,
                        "title": "Member Status Change",
                        "x-if": "context.displayStatus",
                        "enum": [
                           "Agreed",
                           "Declined"                      
                        ]
                     }
                  }
             }

Function:

   methods: {
             displayStatus() {
                if (typeof this.form.callDisposition != "undefined"
                    && this.form.callDisposition === this.options.context.memberStatusChangeActive) {
                   this.options.context.displayStatus = true;
                } else if (typeof this.form.callDisposition != "undefined"
                           && this.form.callDisposition !== this.options.context.memberStatusChangeActive) {
                   this.options.context.displayStatus = false;
                }
             }
           }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to locate the internal/fs module, current solutions are proving ineffective

Every time I try to run my project, I encounter the same issue despite downgrading my node version to 8.4.0 (npm version 5.3.0). I have tried various solutions such as removing the node_modules, running npm cache clean --force, and then npm install, but no ...

javascriptnode.jsreactjsnpmnode-modules

Top method for identifying "abandoned words" within text that has been wrapped

Our content and design teams have a specific request to prevent paragraphs from ending with an "orphan word" - a single word on the last line of text that has wrapped onto multiple lines. The designer's proposed solution is to adjust the margins sligh ...

javascripthtmlcssreactjs

Display the entire dataset retrieved from MongoDB and utilize the doT.js templating engine for rendering

I am facing an issue with extracting data from mongodb and passing it to the view. Despite all my efforts, only one record out of 10000 is showing up instead of all of them. I believe I am very close to resolving this problem but unfortunately, I am stuck. ...

javascriptnode.jsmongodbexpresstemplate-engine

Adding images to HTML using JavaScript below existing images

I'm currently working on a JavaScript game and I want to implement a feature where my character can move under blocks (isometric PNG images) instead of just sliding through them. Is there a way to dynamically adjust my character's position in the ...

javascripthtmlmovelayer

Guide to creating a contenteditable div that automatically generates smart quotes instead of traditional dumb quotes

I've observed that when I write in Google Docs, I get smart quotes. However, when I create contenteditable divs on my own, I only see dumb quotes. Is there a way to make my contenteditable divs display smart quotes instead of dumb quotes? ...

javascripthtmlcss

Switch up the Angular base URL using ngx-translate

I successfully integrated ngx-translate into my Angular project. Now, I want to dynamically change the base href based on the language selected from the header menu. Currently, the URL appears as: "localhost:4200". However, upon launching the project, it ...

javascriptangulartypescript

Angular single-time binding without the need for continuous watching

I'm currently facing a challenge with Angular's one-time binding feature. For instance, when I want to utilize ngIf with one-time binding, it typically looks like this: <div ng-if="::showImage"> <img src="somesource" img-preloader/ ...

javascriptangularjs

Navigating through nested JSON arrays in JavaScript involves looping through multiple dimensions

I am facing difficulty finding the correct solution to my issue here. I am trying to iterate through the nested Products arrays in order to display each Product name. Can this be achieved with my current code, or should I consider rewriting it to make qu ...

javascriptarraysjsonmultidimensional-array

When refreshed using AJAX, all dataTable pages merge into a single unified page

I followed the instructions on this page: How to update an HTML table content without refreshing the page? After implementing it, I encountered an issue where the Client-Side dataTable gets destroyed upon refreshing. When I say destroyed, all the data ...

javascriptphpjqueryhtmlajax

Is it possible to create Interactive Tabs using a Global BehaviorSubject?

Trying to adjust tab visibility based on different sections of the Ionic app, an approach involving a global boolean BehaviorSubject is being utilized. The encapsulated code has been condensed for brevity. In the provider/service globals.ts file, the foll ...

javascriptangularionic-frameworkionic2

Struggling to create a BMI Calculator using JS, the result is consistently displaying as 'NaN'

Having trouble creating a BMI Calculator using JavaScript. The issue I'm facing is that the calculation always returns 'NaN'. I've tried using parseInt(), parseFloat(), and Number() but couldn't solve the problem. It seems that the ...

javascripthtml

Harness the power of Highcharts through an Ajax request to retrieve a JSON file

I am having an issue using Highcharts with a JSON file from an external server. When I try to bind the returning file to the chart in my ASP.NET MVC application, it doesn't work. Here is the code I have attempted: http://jsfiddle.net/Q6ngj/2/ jQuery ...

javascriptjqueryajaxjsonhighcharts

Issue encountered: Request for the key to be assigned to the <template> tag

After encountering an error for not including :key="item.id" on the <template> element, I added it as shown below: https://i.sstatic.net/0tQ0L.png However, doing so resulted in a different error: https://i.sstatic.net/6aYME.png Below is ...

vue.jsvuejs3

Is it recommended to update my peer dependencies when upgrading my RN version?

Recently, I took on the task of updating my old project from RN 0.61.x to 0.70.x and react 16 to react 18. During this process, I encountered a challenge with dependencies that were tied to older versions of React Native in their peer dependencies. This is ...

javascriptnode.jsreactjsreact-nativenpm

Using the scroll feature in the selectyze plugin allows for smooth

The jQuery plugin selectyze from https://github.com/alpixel/Selectyze serves to replace the standard selectbox (dropdown), but there is a small issue that can be quite irritating. I am hoping someone out there may have a solution. Annoying Situation Here ...

javascriptjquery

problem encountered when inserting data (GET method) in a loop using window.location

I'm currently utilizing sailsjs to extract data from the GET parameter within the URL (mydomain.com/prod_master/addsupp). The specific page is /prod_master/addsupp, designed to receive GET parameters for database insertion. In my Javascript code, I ...

javascriptjqueryhtmlnode.jssails.js

Tips for passing a distinct identifier to the following page when transitioning with Link in NextJS

I need to pass an identifier to the next page when a user navigates. On my homepage, I am fetching an array of data and using the map method to display it in a card-based UI. When a user clicks on a card, they should be taken to another page that display ...

javascriptreactjsnext.jsnext-routernext-link

How do I determine the appropriate image type to use?

I'm a beginner in the world of Node.js and I'm currently working on an application that stores image files. However, I am unsure about what type of data the images should be. const userSchema = new mongoose.Schema({ userImage: { type ...

javascriptnode.js

Prevent UI from updating while backend calls are being made in Vuejs

Imagine a scenario where a user in my application can make multiple backend calls before the first one is even finished. How can I ensure that the User Interface freezes after each call until the backend operation completes in Vuejs? Any suggestions woul ...

vue.js

I am interested in using the v-for directive to iterate through a list of firebase image paths

As someone who is not a developer, please forgive me if my question seems simple. I appreciate your understanding. The code currently contains a v-for loop v-tab-item( v-for="(item, index) in getCharacterSkinList" :key="index" ) ...

firebasevue.jsnuxt.js