In Vue Material Table component there is an explanation for single selection, which in codepen doesn't work https://vuematerial.io/components/table (SCROLL TO SINGLE SELECTION). I want working example of this making sure that the list to be rendered is from API.
The example on Vue Material - Table / Selection / Single requires vue-material#1.0.0-beta-8 to run.
The pen that opens is using https://unpkg.com/vue-material#beta as dependency (See at Pen Settings -> JavaScript tab).
Currently https://unpkg.com/vue-material#beta resolves to https://unpkg.com/vue-material#1.0.0-beta-7/dist/vue-material.min.js. Shouldn't take long until it starts to point to beta-8.
Solution:
Nevertheless, until it updates the version, you should add the dependency https://unpkg.com/vue-material#1.0.0-beta-8/dist/vue-material.min.js yourself:
Button Settings
JavaScript tab
Third URL down below: where it is https://unpkg.com/vue-material#beta make it https://unpkg.com/vue-material#1.0.0-beta-8/dist/vue-material.min.js
Profit.
Check an updated pen (where I changed it): https://codepen.io/acdcjunior/pen/yKBvgL
Related
Context:
Currently, I am working on a complex editor application which uses vuex state, vuetify's expansion panel and vue's dynamic component. Each dynamic component uses data which is accepted as props and has its own nested components.
Problem:
The issue with this approach is as the app deals with the large, nested state, the add operation in the UI slows down and makes the UI unusable.
Note:
In the example, I have added 1000 objects just to replicate the issue. Unfortunately cannot use pagination here.
Is there any other way to approach this problem to improve the performance, any suggestions would be helpful.
Issue:
Codesandbox - Demo
Codesandbox - Edit
You are using index as your key and at the same time adding new item to the beginning of the array using unshift - which means every time the new item is added, all components needs to be rerendered. Use :key="item.name" instead and you will see huge speed improvement on adding new items...
Initial render is another problem - if the pagination is not an option, you can look at some virtual list solutions which do render only part of the list visible and make scrolling effective by reusing existing components. One example is vue-virtual-scroller. Vuetify itself has it's own implementation but I'm not sure how well it will work with expansion panel considering this note in the documentation:
We are in the process of integrating the v-virtual-scroll component into existing features and components. If you are interested in helping, please reach out to John Leider in the Discord Community.
(Also it seems you are using really old version of Vuetify...)
Currently i am working in a project which is already developed in v-DataTable of vuejs which is all new to me. In this project, i need to call an event when the scrollbar reach its bottom.
Any API can also be used.
Please help me out.
If project is built with Vuetify (guessing because you've mentioned v-data-table) - take a look at https://vuetifyjs.com/en/directives/intersect/
Otherwise you can check out Interesection Observer API or third party libraries like Tornis
I'm using the VueJS Vuetify framework and I need a pagination option with more features then the basic one available.
what am i looking for:
an option to add custom names (not just numbers)
a tooltip over the buttons
to disable/enable just some of the buttons
pagination - meaning: use next, previous and "..." if there are too many pages
if the pagination had a template option (slot) that would of been perfect.
now i am wondering how is the best why to get my goal. is there a way to add templates to vuetify? is there a different component that has this options on the pagination?
Read the api here In answer to your questions:
1+2+3 This is not supported in vuetify out of the box and therefore you may want to consider writing your own pagination tool or looking for a different package.
4. This can be set in the props as described in the docs above, see total-visible prop and length.
I'd like to update valuemax value on a slider that people can only choose a value from 1 to 3, not to 5 like it is now. I have 'inspect the element' on the page, and got something like this:
<div dojoattachpoint="sliderHandle,focusNode" class="dijitSliderImageHandle dijitSliderImageHandleH" dojoattachevent="onmousedown:_onHandleClick" wairole="slider" valuemin="1" valuemax="5" role="slider" aria-valuenow="3" tabindex="0" aria-labelledby="years_label" aria-valuemin="1" aria-valuemax="5" style="position: absolute;"></div>
I'm trying to find file/place on where that value can be updated in the code, however I'm not able to figure it out.
Assuming you have access to the source code for this application, change the javascript code that creates this slider widget.
You're looking at the DOM for the page in your example. You can use the minimum and maximum properties, which translates to some of the values you see in the DOM. See the Dojo dijit/form/Slider documentation (takes you to 1.6 since it looks like you're using an older version of dojo because of the use of dojoattachpoint, those names changed in later versions of Dojo).
If you're not sure what class or widget this is in the source, look for the id element further up in the dom. Often that will have the package and class name as part of the id. Looking at the developer tools to see what files were loaded on the networking tab might give you a clue, if the application hasn't gone through any customer build or packaging to optimize it.
I am working now a few weeks with Leaflet and Angular CLI on a project involving geo map and in-door maps (Leaflet custom maps).
The application is conceptually very simple. I have to provide the user with a list of in-door locations (e.g. room) in a form of a simple location tree table, where, on user click, a new in-door map must be called. Also, I have to make a custom search box with a few filtering options for searching through sets of structured data and plotting the data on the maps in a form of Leaflet markers.
The question I have is the following: What would be the best way to implement the 2 above mentioned controls (location tree and search box), taking into account the nature of the app and the technology I am working with (Leaflet library and Angular CLI (angular 4.x))?
From my point of view, I can see 2 options by now:
1) Create the controls (location tree and search box with filters) using Leaflet L.control.extended (negative(-): seems to me that I have to statically type html in the L.control.extended 'onAdd' function in order to create the controls -> no possible Angular 4 templating engine advantages)
2) Create the controls using Angular 4 Component's templates, in Angular 4 fashion, neglecting the very existence of Leaflet L.control.extended (negative: It seems to me that this option unnecessary complicates the app + intuitively seems wrong since Leaflet extended control seems 'as born' for such types of problems)
It would be great if I could dynamically nest Angular component inside Leaflet custom control somehow. Any suggestions?