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
Related
In the below code, testMethod is automatically calling when the page is loaded (without user clicking on the name link).
Can you please help me, How to prevent automatic navigation?
<v-data-table
:items="testData"
>
<template v-slot:item.name={"item"}>
<a href="testMethod">
{item.name}
</a>
</template>
</v-data-table>
<script>
methods: {
testMethod(id) {
//logic related to routing
}
}
</script>
This implementation will not make it call the testMethod, until the user click on the link! Still it won't work because of the use of href!
You don't call the method with an href on the "a" tag. Instead, just add an #click on the "a" tag and this will make it call the test method when the name is clicked. Also, you don't have to use an "a" tag, you can use any other element and add the #click to it.
Update your template as follows
<template>
<v-data-table :items="testData" :headers="headers">
<template slot="item.name" slot-scope="{ item }">
<a #click="testMethod">{{item.name}}</a>
</template>
</v-data-table>
</template>
Good luck.
Thanks for the quick response. The issue is fixed, I used #click.stop="testMethod" along with href="routing to another page".
<a href="routing to another page" #click.stop="testMethod()">
I tried using a click event on a <router-link>. It works, but it is reloading the page everytime the link is clicked. I would like to avoid it but I can't figure out how.
I am aware that <router-link> does not accept a simple #click event. I saw on some forums that #click.I native would work, but as we know, that is deprecated.
So I would like to know if there is any solution other than wrapping the router link in a div and putting the listener on that div.
The reason why I want to do this is that I want to bind a class dinamicaly when the link is clicked. I have created a dropdown menu which is triggered onClick. But then when I follow a link inside that dropdown menu, the menu remains open. Therefore, I would like to have an additional #click event to dinamically bind a class (display: none) to the dropdown menu. The thing is that the items inside the dropdown are iterated which send parameters to a Vuex Mutation and therefore i can’t use regular tags and wrapping the router-links with a span or div is also not giving me the desired effect.
Thank you !
Regards,
T.
I have managed to solve the problem using a div wrapper and changing my css (that was preventing the code to work properly)
<div class="dropdown">
<a class="dropbtn" #click="dropClick"><i class="ri ico ri-draft-line"></i> Docs <i class="ri ico ri-arrow-drop-down-line ri-1x"></i></a>
<div class="dropdown-content" :class="{ 'dropdown-content-display': clicked }">
<div class="wrapper" v-for="route in $store.state.menuItems" :key="route.name" #click="dropClick">
<router-link :to="{ name: 'docs', params: { title: route.name } }"> <i :class="'ico ri ' + route.icon"></i> {{ route.name }}
</router-link>
</div>
</div>
</div>
If a understand your question, there is a "active-class" property on vue-router(router-link). You can set your classes dynamically by based on an active route.
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.
i have an ant-design-vue table which has the function to select the row and open a new drawer with the record.
this is the template of the table.
<a-table
:dataSource="employeeData"
:rowKey="record => record.sgid"
:pagination="{ pageSize: size }"
:columns="columns"
:loading="loading"
:scroll="{ x: 1300, y: 400 }"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
>
<template slot="name" slot-scope="text, record">
<div class="click-event" #click="select(record)">{{ text }}</div>
</template>
<template slot="id" slot-scope="text, record">
<div class="click-event" #click="select(record)">{{ text }}</div>
</template>
<template slot="mobile" slot-scope="text, record">
<div class="click-event" #click="select(record)">{{ text }}</div>
</template>
</a-table>
with this code i add a <div> to all slot so that user can click anywhere in every column. but there is still some empty space between two column in a row that cannot be click. what should i do to make the user can click on a row to run the select function?
Wrap your column around a Link for redirection instead of an HTML anchor tag <a> <slots /> </a>.
react-router-dom
You could use Link from react-router-dom and use it to trigger your component or container. This will also isolate your slot function logic in a separate component or container
import { Link } from 'react-router-dom';
...
<Link to={`/redirect/to/slot-function-component/`}>
<Row Content />
</Link>
...
It is important to register this component in a routes.js
Ant Design: Anchor Component
If you're going to stick with Ant Design, then you might wanna explore Anchor Component API. Anchor Props and Link Props provides you with lots of options to implement your use case in multiple ways.
Explore the API and see what suits your requirements.
I need to do simple drop-down list (aka select) with Vue Element. I need to put selected value id in variable, but I can't understand how to do it with Element. I know how to do it in pure Vue, but it's do not working with Element.
Here is my code https://jsfiddle.net/dxh2mbkv/
<el-select clearable placeholder="Select" class="SelectFullWidth" >
<el-option
v-for="item in people"
:value="item.name" >
</el-option>
</el-select>
I need to get selected id in variable.
There is small issue with example. It's now working, because I have never used Vue Element with jsfiddle.
Pure Vue solution that I need reimplement in Vue element https://jsfiddle.net/mani04/3x0z3vzk/
I have modified your fiddle to make it work:
https://jsfiddle.net/dxh2mbkv/33/ (if you can't see labels in dropdown it seems to be jsfiddle issue, when you open developer tools in your browser or shrink your screen width, they should appear)
<el-select clearable placeholder="Select" class="SelectFullWidth" v-model="selectedPerson">
<el-option
v-for="item in people"
:key="item.key"
:label="item.name"
:value="item.key" >
</el-option>
</el-select>
Key: {{selectedPerson}}
What I did was I added v-model="selectedPerson" to el-select, changed your :value in el-option from item.name to item.key and added :label="item.name" to display option labels properly. And since your selectedPerson binds to a number, I changed it's default value to null.