{"action":"created","issue":{"url":"https://api.github.com/repos/monterail/vuelidate/issues/340","repository_url":"https://api.github.com/repos/monterail/vuelidate","labels_url":"https://api.github.com/repos/monterail/vuelidate/issues/340/labels{/name}","comments_url":"https://api.github.com/repos/monterail/vuelidate/issues/340/comments","events_url":"https://api.github.com/repos/monterail/vuelidate/issues/340/events","html_url":"https://github.com/monterail/vuelidate/issues/340","id":343028432,"node_id":"MDU6SXNzdWUzNDMwMjg0MzI=","number":340,"title":"[question] A proper way to use vuelidate with vuex and nested components","user":{"login":"mu4ddi3","id":2186112,"node_id":"MDQ6VXNlcjIxODYxMTI=","avatar_url":"https://avatars2.githubusercontent.com/u/2186112?v=4","gravatar_id":"","url":"https://api.github.com/users/mu4ddi3","html_url":"https://github.com/mu4ddi3","followers_url":"https://api.github.com/users/mu4ddi3/followers","following_url":"https://api.github.com/users/mu4ddi3/following{/other_user}","gists_url":"https://api.github.com/users/mu4ddi3/gists{/gist_id}","starred_url":"https://api.github.com/users/mu4ddi3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mu4ddi3/subscriptions","organizations_url":"https://api.github.com/users/mu4ddi3/orgs","repos_url":"https://api.github.com/users/mu4ddi3/repos","events_url":"https://api.github.com/users/mu4ddi3/events{/privacy}","received_events_url":"https://api.github.com/users/mu4ddi3/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":2,"created_at":"2018-07-20T09:03:34Z","updated_at":"2018-10-02T18:48:50Z","closed_at":null,"author_association":"NONE","body":"<!--\r\nIMPORTANT: Make sure that you are familiar with documentation before submitting an issue.\r\n\r\n  https://monterail.github.io/vuelidate/\r\n\r\nIMPORTANT: Please use the following jsfiddle to provide a reproduction of your problem\r\n\r\n  https://jsfiddle.net/Frizi/b5v4faqf/\r\n\r\nIssues without a working fiddle are generally much harder to solve and usually take much more time to actually do it.\r\n-->\r\nPanowie, Dziękuję za świetną bibliotekę!\r\n\r\nI have a general question about proper  use case in situation like this:\r\n\r\nThere is a big form containing ~100 fields. For code clarity  i divide it into components which are reflecting sections of the form. For example \"ClientBlock\" component contains all fields related to client data such as name and adress etc, \"VehicleBlock\" component holds fields related to vehicle such as technical parameters of the car etc. There are also few others  components. All of them are on the same top-level:\r\n\r\n```\r\n<form>\r\n   <ContractBlock></ContractBlock>\r\n   <ClientDataBlock></ClientDataBlock>\r\n   <VehicleBlock></VehicleBlock>\r\n   <InsuranceBlock></InsuranceBlock>\r\n   <GeneralContractsBlock></GeneralContractsBlock>\r\n</form>\r\n```\r\n\r\nIn addition to this structure i use vuex store to hold my data, because there are possible situations where  \r\nsome components fields depends on select from other component. \r\n\r\nSo my vuex data look preety much like so: \r\n\r\n```\r\n...\r\nclient: {\r\n    name: \"\",\r\n    firstName: \"\",\r\n    lastName: \"\",\r\n    postalCode: \"\",\r\n    city: \"\",\r\n    street: \"\",\r\n    houseNumber: \"\",\r\n    apartmentNumber: \"\",\r\n},\r\nvehicle: {\r\n    make: \"\",\r\n    model: \"\",\r\n    version: \"\",\r\n    fuelType: \"\",\r\n    engineCapacity: 0,\r\n    enginePowerKW: 0,\r\n    capacity: 0,\r\n    dmc: 0,\r\n    seats: 0,\r\n    productionYear: 0,\r\n},\r\notherData1: \"\",\r\notherData2: \"\",\r\notherData3: \"\",\r\notherData4: \"\",\r\n...\r\n```\r\nEach component use mapState for only those fields that it needs and interact with store independently to avoid tons of props and events. So far so good. At the end of the whole form there is [SAVE] button which should be disabled if there are any validation errors in any of the components fields. \r\n\r\nMy question  is where i should define rules for vuelidate (validations key)? \r\nShould i define it in top level  App.vue and somehow pass it by prop to each of the components? (i saw something like  this in docs  but there you suggest to pass $v.value (for concrete field - value), but what if inside component i have many fields? Should i pass whole $v?) \r\nIf i took this approach do i need to define all my store data using mapState and mapGetters at the top of  the app, so they can be accessed using this.XXX? (it is silly as i divided my app into components to avoid that)\r\n\r\nOther way is to define validations that contains only slice of whole fields inside each of component who use it but then i will end up with few separate validations objects so they are no more \"reactive\" between each other. \r\n\r\n\r\nAt the end i need to somehow check top-level $invalid property to decide of possible actions for the user.\r\n\r\nSorry  for a long text  but i want to be as precise as i can here, im preety new to vue and maybe i miss some concept but i hope  you can give me a hint.\r\n\r\nAgain thanx for you work and  great vuelidate library."},"comment":{"url":"https://api.github.com/repos/monterail/vuelidate/issues/comments/426388437","html_url":"https://github.com/monterail/vuelidate/issues/340#issuecomment-426388437","issue_url":"https://api.github.com/repos/monterail/vuelidate/issues/340","id":426388437,"node_id":"MDEyOklzc3VlQ29tbWVudDQyNjM4ODQzNw==","user":{"login":"mu4ddi3","id":2186112,"node_id":"MDQ6VXNlcjIxODYxMTI=","avatar_url":"https://avatars2.githubusercontent.com/u/2186112?v=4","gravatar_id":"","url":"https://api.github.com/users/mu4ddi3","html_url":"https://github.com/mu4ddi3","followers_url":"https://api.github.com/users/mu4ddi3/followers","following_url":"https://api.github.com/users/mu4ddi3/following{/other_user}","gists_url":"https://api.github.com/users/mu4ddi3/gists{/gist_id}","starred_url":"https://api.github.com/users/mu4ddi3/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mu4ddi3/subscriptions","organizations_url":"https://api.github.com/users/mu4ddi3/orgs","repos_url":"https://api.github.com/users/mu4ddi3/repos","events_url":"https://api.github.com/users/mu4ddi3/events{/privacy}","received_events_url":"https://api.github.com/users/mu4ddi3/received_events","type":"User","site_admin":false},"created_at":"2018-10-02T18:48:50Z","updated_at":"2018-10-02T18:48:50Z","author_association":"NONE","body":"@Matteoo7 at the end  i made this by having an validation object at the  top-lvl of my app under the validations() key.\r\n\r\nIt looks more-less like vuex store state, to reflect it. For example when vuex store is:\r\n```\r\nclient: {\r\n\tlegalForm: \"\",\r\n\tnip: \"\",\r\n\t//...\r\n},\r\nvehicle: {\r\n\tvehicleStatus: \"\",\r\n\ttypeOfVehicle: \"\",\r\n\t//...\r\n},\r\n```\r\nthen my validation are:\r\n\r\n```\r\nlet client = {\r\n\tclient: {\r\n\t\tlegalForm: {required: requiredIf(() => this.validateRequired),},\r\n\t\tnip: {\r\n\t\t\trequired: requiredIf(() => {\r\n\t\t\t\treturn (this.isLegalFormContains(\"op\") || this.isLegalFormContains(\"opdg\")) && this.validateRequired;\r\n\t\t\t}),\r\n\t\t\tisValidNipOrEmpty: ((value) => (isValidNip(value) || value === \"\") && this.validateRequired)\r\n\t\t},\r\n\t\t///...\r\n\t},\r\n};\r\n\r\nlet vehicle = {\r\n\tvehicle: {\r\n\t\tvehicleStatus: {required: requiredIf(() => this.validateRequired),},\r\n\t\ttypeOfVehicle: {required: requiredIf(() => this.validateRequired),},\r\n\t\tmake: {required: requiredIf(() => this.validateRequired),},\r\n\t\tmodel: {required: requiredIf(() => this.validateRequired),},\r\n\t\tversion: {},\r\n\t\t///...\r\n\t},\r\n};\r\n\t\r\nreturn {\r\n\tstate: {\r\n\t\t...client,\r\n\t\t...vehicle,\r\n\t\t//...\r\n\t},\r\n};\r\n```\r\n\r\nThen in App.ve file i pass whole vuelidate as prop to each interested component:\r\n\r\n```\r\n<div class=\"column col-12 py-2\">\r\n\t<MainBlock :v=\"$v\"></MainBlock>\r\n</div>\r\n<div class=\"column col-12 py-2\">\r\n\t<ClientDataBlock :v=\"$v\"></ClientDataBlock>\r\n</div>\r\n<div class=\"column col-12 py-2\">\r\n\t<VehicleBlock :v=\"$v\"></VehicleBlock>\r\n</div>\r\n```\r\n\r\nThanks to this approach i can call update method from @change event in some form field inside component, and inside this method  i can trigger validation before updating store:\r\n\r\n```\r\nthis.v.state.client.$touch();\r\n``` \r\n\r\nIt's just mine way of doing it but it works well. "}}
{"actor":{"display_login":"mu4ddi3"}}