I want to add a text field to the left of Vuetify's data table footer, like so. Does anyone know how to accomplish this?
I know it's possible to hide the footer and build your own, but I want the rest of the default functionality. If anyone has access to the default footer code that could also offer a simpler starting point.
Thank you!
I was able to get the functionality you're looking for by using the footer slot and setting the position of the element to "absolute":
<template v-slot:footer>
<v-checkbox style="position: absolute" class="pa-0 pl-2" label="Show Archived" hide-details />
</template>
Result:
Maybe it is too late, but you can search the elements of footer in the mounted hook. Then append HTML with innerHTML:
mounted() {
var footer = document.getElementsByClassName('v-data-footer')
for (var i = 0; i < footer.length; i++) {
footer[i].innerHTML += '<div>asad</div>'
}
},
Add additional element in slot footer
<template v-slot:footer>create your own text field here</template>
https://vuetifyjs.com/en/api/v-data-table/#slots
Related
What or where is individual id or any other element that I can call to run a function on component.
Example: using add button I'm dynamically creating colored squares. Each square has close button.
Then I want to delete one of squares, let's say the blue one (third child of template).
v-bind:id='var' doesn't works because then all squares have the same id.
You can use ref, you can define ref in every added component. The ref is array. you can refrence component through index of the ref.
for example;<div v-for="(item) in arr" :key="item.id"> <span ref="testRef"> item.name </span> </div>, you can use 'this.$refs.testRef[index]' find component which you want.
There are multiple options. For instance, in your v-for loop you can get the index this way: (official docs)
<div v-for="(item, index) in myList" :key="index">
{{ item.name }}
</div>
You could then for example use the index in a ref to access the element for the script.
Another option is to pass the event instance to the onclick listener with the special keyword $event, and use this to get the element:
<div ... #click="myFunction($event)">
{{ item.name }}
</div>
And then in your script
myFunction(ev) {
// do something with the element that was clicked on
console.log(ev.target)
}
However, a more 'vue' way would be to not mess with the elements, but only manipulate the underlying data and let vue worry about representing the data with elements on your page. For instance, you could make your squares be represented by a list of objects, containing their own data own the state (opened or closed). So in your script you have:
data() {
return {
squares: [
{ color: "ff0000", opened: true },
...
]
}
},
And in your template something like
<div
v-for="square in squares"
v-show="suare.opened"
#click="square.opened = false"
> ...
I am customizing this dialog menu from the dialog behavior of q-select in quasar. but i cant figure out a way to remove this:
any idea how i should go about this? is this even possible?
You don't need to write extra CSS to just remove the label. You can just remove the label property and it will work.
<q-select color="purple-12" v-model="model" :options="options">
<template v-slot:prepend>
<q-icon name="event" />
</template>
</q-select>
label : String
Description
A text label that will “float” up above the input field, once the field gets focus
Nevermind guys I figured it out. I used .q-select__dialog label{ display: none } and it worked :D
I'm trying to build a component that stays at the bottom of my pages to be a kind of log/status tool. The data are stored in a state in a store.js from the main App.vue. From the time being I just store when I click a button in another view.
When I try to do it on the App.vue for testing I encounter a problem:
<footer id="footer_id" class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">
<template v-for="line in storeState.loglines" >
{{line}} <br v-bind:key="line" />
</template>
</footer>
I need to add a <br/> to write it on a new line but vue asks me to bind it like I did, even if it's not really needed. The result is a warning when I press the button twice:
[Vue warn]: Duplicate keys detected: 'log-text'. This may cause an update error.
Where "log-text" is what I wrote in the log.
The store.js is very simple:
export const store = {
state: {
loglines: ['test1','test2'],
},
writeLog(line) {
this.state.loglines.push(line);
//scroll to bottom: don't know how to do it directly in the footer
var objDiv = document.getElementById("footer_id");
objDiv.scrollTop = objDiv.scrollHeight;
}
};
How do I avoid the warning? Am I doing it wrong? As an alternative I might have to add a datetime as key on my store for each line of statuslog.
The key prop should be unique, so you could either use a datetime variable as you mentioned or simply add an index to the v-for directive and use it inside the template.
<footer id="footer_id" class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">
<template v-for="(line, i) in storeState.loglines" >
{{line}} <br v-bind:key="i" />
</template>
</footer>
EDIT: this is a solution for the problem that the OP presented.
As a personal choice and a general good practice I would rather solve the issue by putting the {{line}} inside a div and styling it accordingly.
Also I would perhaps choose not to use a template when using a div seems more appropriate.
Anyways, I limited myself to solving the issue regarding the repetition of the key value as that is the problem presented by the OP.
How do I clear the cache item list for auto complete ? I am using the cache-items flag. Once The user has the results for the current query and want to try a new list, I need the current items to be cleared.
I have "cache-items" on so the user can see all his selections before submitting.
<v-autocomplete v-if="showautocomplete" v-model="autocomplete_model"
:items="items" :loading="isLoading" autofocus
:search-input.sync="autocomplete_search" chips clearable hide-selected cache-items>
I don't know if you still need this but I think I've found an answer here: https://github.com/vuetifyjs/vuetify/issues/11365 from bka9.
You can add a ref on your v-autocomplete and change the cachedItems through the $refs. I'm not sure when you would have to trigger the method but that's all that's missing.
<template>
<v-autocomplete ref="autocomplete" cache-items ... />
</template>
<script>
methods: {
clearCachedItems() {
this.$refs.autocomplete.cachedItems = [];
},
},
</script>
I'd like to have an expansion panel <v-expansion-panel> open by default on page load, but cannot figure it out. I know for Angular, you put [expanded]="true", but this doesn't work with Vue. I haven't had luck anywhere finding this answer. I'm not sure if javascript is needed or not, or if it can be done right within the <v-expansion-panel> tag.
I tried <v-expansion-panel [expanded]="true" and it did show the buttons that are in that section, but that's it.
<section>
<v-app>
<v-expansion-panel
v-model="search"
expand
>
.
.
.
</v-app>
</section>
Watch the PROPS section on the documentation:
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
The expand prop says: Leaves the expansion-panel open while selecting another.
This is not what you want.
You need to use value prop: Controls the opened/closed state of content in the expansion-panel. Corresponds to a zero-based index of the currently opened content. If expand prop is used then it is an array of Booleans where the index corresponds to the index of the content.
So, in your case:
<section>
<v-app>
<v-expansion-panel
v-model="search"
:value="0"
>
.
.
.
</v-app>
</section>
Where "0" is the index of the expansion panel expanded by default.
I made an example here:
https://codepen.io/anon/pen/pmqyOP?&editable=true&editors=101#anon-login
It works for me use:
<v-expansion-panels v-model="panel" multiple>
panel: [], // default
panel: [0, 1, 2, 3], // open items 1 to 4
If you want to return all the items by default or use a function to expand all:
this.panel = Array.from(Array(this.dataReturned.length).keys());
https://vuetifyjs.com/en/components/expansion-panels/#model