Comments (9)
I think this is working as intended (it would apply to non-grouped fields too) actually, but you're right that it could be confusing. The issue is that at a library level we don't want to assume the modelβs value should be equal to an available option since that takes power away from implementers. But I could be convinced this behavior should be changed for select
or box
inputs since the library will always control those internals.
A pretty easy way to solve this edge case in user-land right now is to just perform a check on the options to make sure the current value is selected. Here's a forked codepen:
https://codepen.io/justin-schroeder/pen/BajBWWm
from vue-formulate.
Hey π Are your questions specifically in the context of form generation?
from vue-formulate.
Hmm actually I think Iβm following. This is a good question....thanks for the detailed example. Let me think on this....
from vue-formulate.
Hey, thanks for the great work on this project and the quick response! I actually just figured out a way to do it. But to answer your question, no it's not a generated form. I'm working on an order form where a user can add some products. They start with a product category, then they're shown a product model in that category.
I realized you can actually get the information from the context and do what I need to do, but it's a little verbose/janky. Here's what I ended up with:
<FormulateInput
type="group"
name="products"
:repeatable="true"
label="Products"
add-label="+ Add Product"
validation="required"
:value="[{}]"
#default="{ name, index }"
>
<FormulateInput
name="productCategory"
:options="productCategories"
type="select"
label="Product Category"
validation="required"
/>
<FormulateInput
v-if="model[name][index] && model[name][index].productCategory"
name="productStyle"
:options="getProductStyles(model[name][index])"
type="select"
label="Product Style"
validation="required"
/>
</FormulateInput>
I need to have a default value in my group field, even if it's just a single empty object, otherwise it throws an undefined index error.
from vue-formulate.
Hey @Mosnar. You're pretty much right on here. Because it's repeatable you have to use functions instead of computed props to calculate the values of the internals unless you abstract the contents of default group slot into it's own component. I just worked up a little example this conditional repeatable functionality as an example of how I would solve this:
https://codepen.io/justin-schroeder/pen/NWGQbKV
I think the only feature-addition we could potentially add to make this a tad easier is have something like a groupValues
exposed on the context object of the default slot. That makes it a bit easier, because you don't have to access the data by the index, but it ultimately requires passing the data into a method to compute the correct values. Open to suggestions on that one.
I'll leave this open for now to help anyone else stumbling on it.
from vue-formulate.
Thanks for the example! There's one other caveat with this approach I ran into that can be a little weird that I wanted to document here for others. When you update the source for a dependent field (ie, Select "Coffee" and then "Drip") then change it to "Tea", you'll notice the model will still have the invalid "Drip" value. For me, this caused issues because certain fields were supposed to be hidden and I was only checking to see if a value was set on the dependent property, it would show the dropdown without any options. To get around this, I had to introduce an additional check into my v-if
to ensure there were options available.
I expanded on your example to show the issue. Try selecting "Coffee" -> "Drip" then change it from "Coffee" to "Tea" and you'll notice the "Leave me room for cream" field still shows up due to the malformed model:
https://codepen.io/mosnar/pen/oNjKMMv
The hacky solution is of course to simply check up the chain of dependencies, but this can get pretty messy pretty quickly if you have a lot of fields and you still have an invalid model.
from vue-formulate.
I agree that this is working as intended (but perhaps not as expected.) A side-effect of that is some weird behavior where the input model and the form model can fall out of sync. In your CodePen, try this:
- Select Coffee
- Select Drip
- Change "Coffee" to "Tea"
- Change "Tea" back to "Coffee"
See that "Drip" is already pre-selected but the model doesn't have a "variant" property.
I get the feeling that these types of issues are fundamentally related to the core problem in my initial post where additional conditions and logical complexity are needed to ensure the form is in a valid state. I don't have any suggestions at this point, but I think there's a good solution out there that would solve all/most of these quirks at once.
P.S. I see you're from Charlottesville! Greetings from Blacksburg!
from vue-formulate.
:) Howdy neighbor π
Yeah, in that codepen I made the variety option go away intentionally by setting the value to undefined
you could choose to set it to an actual value, or the first option, if that better suits the needs of the author.
And I totally agree that the default behavior of leaving behind an un-available option is definitely not an expected behavior. Whatβs your opinion on what the expected behavior is? Sometimes that's tricky to figure out.
from vue-formulate.
And, I actually will use dependent fields in a generated fashion, where a DB is storing hundreds of different forms for different clients.
from vue-formulate.
Related Issues (20)
- Nuxt integration issue for plugin that needs window object
- Vue Formulate and Graphql HOT 2
- Add opportunity to use templates with JSON Schema
- Asynchronous file upload or an event to see if all uploads are done
- Custom Validation Messages HOT 2
- Vue 2.7 & script setup
- Need to get the name of the file Input in uploader
- Slow perfomance to type in input fieds. HOT 1
- textarea emits false immediately after value when wrapped in conditional statement in tsx template HOT 1
- FileRemoved get ID or any reference about file
- Dark theme for the project? HOT 3
- @input event is triggered so many times while we are sliding the slider
- "addMore" slot content in repeatable group input not showing up HOT 2
- E-mail validation rule HOT 2
- Performance degradation (super slow TTFB) with long select option list HOT 2
- The behavior of Vue Formulate File Input is incorrect during uploading
- File upload: Uncaught (in promise) Unable to upload file
- How to change the range slider dot color? HOT 2
- Upgrade guide from VueFormulate to FormKit
- Vue Formulate Fails to run with Inertia js HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-formulate.