This is the component:
https://marmelab.com/react-admin/SimpleFormIterator.html
I want the first item to be required, and the user shouldn't be able to delete it.
As far as I understand, there is no built-in way for this component to do this, at this point.
I am wondering if there is a way to create a custom wrapper for this component, that can do this. Maybe render the first item separately within this custom wrapper?
To show the first item by default, you can set the default value to an empty array of objects.
<ArrayInput
source="address"
label="address"
defaultValue={[{}]}
></ArrayInput>
Related
I have 2 questions,
How can I set the value of the global search box and trigger the filter programmatically, using java script (basically I want to implement a persistent filter, based on the last user input, as the user navigates in and out of the page), check image below
Considering the Veu devtool component, I can find the vue-good-table Component and its Search subcomponent. And I can see that there is a value propuerty on this subcomponent that has the same value I had typed in the search box.
So my question is if with this information can I have a way to solve my first question, does the information in the Vue devtool can help me figure out the references to that object and value and then set it?
This could be a very useful tool in case I have a similar problem in the future with another component.
Have very little experience with Veu and general searches on how to access data or elements in components has been confusing, I just understand the properties and events to pass data, but in this case this is an imported component, so I can not hack it.
Thanks #tao, I read the docs before but skipped noticing this property
externalQuery
This is the one that solves the problem, you can link a variable to the search item and I then use your own text input box to implement the solution.
in a vuetify table i do not want to show some headers and their corresponding column. Instead, I want them to be displayed in a table in the extended-item slot. The items of the table are completely user editable. This all works fine too.
The problem is that in the extended-item slot not only the properties of the selected item are displayed, but the properties of all items.
In the vue-dev-tools it is displayed correctly. I think I'm missing something fundamentally simple here. Does anyone have any ideas?
Thanks in advance
Here is the link to the sandbox: v-data-table in expanded-item slot of v-data-table, user editable
You can do it changing :items="tabItems" by :items="[item]" (i put inside array because one item alone is not legible by :items v-data-table.
If you call tabItems you will iterate over all items again so its better to use filtered expanded-item item instead do hard work manually.
I tried in your sandbox, you can change line 54 with my suggestion and you could check that its working well.
I'd like to change the layout for my resources, so that the page /resource-name shows a card with the tabs "List", "Create", "Edit". I managed to make it "list" under the List tab using dataProvider(), but I can't figure out how to render the Create & Edit components under the relevant tabs. Any advice?
For what I understood you want to have a component with a <TabbedShowLayout> with tabs for list, create and edit on the route /resource? The route /resource is the one RA assumes when a component is provider in the list prop of <Resource>, so if you create a component with a <TabbedShowLayout> an in <Tab> list, put a <List> component, on create and Create component, and for edit an Edit component it might work for what you desire, I have not tested it. However see if is not ideal to use the props create, edit, and list of Resource, with them you can present data and have actions linking to one another.
Maybe your problem is in routing, since create in RA defaults to /resource/create, could you clarify your problem?
I'm working with Vue+F7.
Is it possible to create new side panel in Vue, according to my scenario I need something like when app open the first page will come with one left side panel. Now when the user logged in I need to another side panel rather than the first one, because the content I would like to place is different.
If possible can anyone tell me how to create that panel in my example.vue?
Thanks
You can create a component where you sent a Json with the menu data.
For example:
{[
{"name":"name_route1", "route":"#/miRuta1.vue"},
{"name":"name_route2", "route":"#/miRuta1.vue"},
{"name":"name_route3", "route":"#/miRuta1.vue"}
]}
This way you would have the same component (you would use the same panel) but dynamically you would pass the elements that it is going to mount.
you can simply make both panels and show them conditionally based on the loggedIn boolean. with v-show this is very easy. check these out:
v if
v else if
v show
I have a set of multilevel data to be display using abovementioned component. Usually in PHP I simply iterate the data to display it as li but coming from web background, I just can't put it all together when using react-native. What is the right way to display a set of menu
FYI, I'm also using react-native-router-flux to manage the router.
If you want to build you own menu, you'll have to customize the renderRow of your ListView. If you take a look at RN's official doc on ListView here, it shows that you can specify a sectionID, for example.
You can then specify how each row renders.
renderRow: function (rowData, sectionID, rowID, highlightRow) => renderable
Takes a data entry from the data source and its ids and should return
a renderable component to be rendered as the row. By default the data
is exactly what was put into the data source, but it's also possible
to provide custom extractors. ListView can be notified when a row is
being highlighted by calling highlightRow(sectionID, rowID). This sets
a boolean value of adjacentRowHighlighted in renderSeparator, allowing
you to control the separators above and below the highlighted row. The
highlighted state of a row can be reset by calling highlightRow(null).
Another option is using open source modules built by the community.
The one closest to your needs I could find is : https://github.com/jaysoo/react-native-menu