I have a table body which is declared as animation block.
in some particular scenarios i want remove the transition to the table body.is there any way to do that.
HTML
<transition name="condition ? 'fade' : ''">
<p>Hello</p>
</transition>
Specify the condition in the name attribute, when condition is true (or equal any value) run the "name" argument, in another case leave it empty and the transition will not work
You can use template with if-else condition:
<template v-if="condition">
<transition> <!-- if condition matched, use transition -->
<<html element>>
</transition>
</template>
<template v-else>
<<html element>>
</template>
Related
I have built a user-defined component (async-select) on top of another component (vue mutliselect) like this:
https://jsfiddle.net/2x7n4rL6/4/
Since the original vue-multiselect component offers a couple of slots, I don't want to loose the chance to use them. So my goal is to make these slots available from inside my custom component. In other words, I want to something like this:
https://jsfiddle.net/2x7n4rL6/3/
But that code oes not work.
However, if I add the slot to the child component itself, it works just fine (which you can see from the fact that options become red-colored).
https://jsfiddle.net/2x7n4rL6/1/
After surfing the web, I have come across this article, but it does not seem to work
Is there any way in VueJS to accomplish this ?
Slots can be confusing!
First, you need a template element to define the slot content:
<async-select :value="value" :options="options">
<template v-slot:option-tmpl="{ props }">
<div class="ui grid">
<div style="color: red">{{ props.option.name }}</div>
</div>
</template>
</async-select>
Then, in the parent component, you need a slot element. That slot element itself can be inside of another template element, so its contents can be put in a slot of its own parent.
<multiselect
label="name"
ref="multiselect"
v-model="localValue"
placeholder="My component"
:options="options"
:multiple="false"
:taggable="false">
<template slot="option" slot-scope="props">
<slot name="option-tmpl" :props="props"></slot>
</template>
</multiselect>
Working Fiddle: https://jsfiddle.net/thebluenile/ph0s1jda/
is special attribute is:
<!-- Component changes when currentTabComponent changes -->
<component v-bind:is="currentTabComponent"></component>
conditional rendering is:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
I know the different between using v-if and v-show, but I don't know the difference between using a list of v-ifs for different cases vs using the is special attribute. When should I use them?
Does is work like v-if or v-show? I mean, does it render all the components anyways? Is is like a syntactic sugar for a list of subsequent v-ifs?
is would be useful if the list of v-ifs would all render a component if true.
Like so:
<template v-if="component == "firstComponent">
<first-component></first-component>
<template v-else-if="component == "secondComponent">
<second-component></second-component>
</template>
<template v-else-if="component == "thirdComponent">
<third-component></third-component>
</template>
This can then be reduced to:
<component :is="component"></component>
Concerning your second question
Wether component :is works like v-if or v-show depends on wether you wrap it in <keep-alive> or not. Read the documentation on this here. Note though, that using <component> a component only gets created until it is necessary the first time, wether you use <keep-alive> or not.
So:
v-if (re)creates the component everytime the condition is met.
<component :is="..."> creates the component everytime the condition is met (like v-if).
<keep-alive><component :is="..."></keep-alive> creates the
component at most 1 time (but possibly 0).
A component with only v-show on it is created exactly once.
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.
So if I have a slot like this:
<span slot="?" slot-scope="data>...</span>
What should question mark be here if I want to use this for everything?
This is not supported by the current state of Vue, nor is this supported when trying to hack this feature in using the JavaScript Proxy class, this is because the internal design of Vue first collects all children and maps them to an object, before passing this to the next component.
You can work around this by specifying your slot contents multiple times, like:
<!-- inside parent -->
<my-child>
<p slot="head">Hello World</p>
<p slot="body">Hello World</p>
</my-child>
Or modifying the child to accept a base slot to use if a slot is not passed in
<!-- inside child -->
<div>
<slot name="head">
<slot name="base/>
</slot>
<slot name="body">
<slot name="base/>
</slot>
</div>
I like to toggle the topic.text property. I want to collapse AND expand it alternately.
I have the following setup:
<template v-for="topic in $store.state.forum.topics">
<div class="topic">
<div class="date">{{ topic.user }}, {{ topic.date }}</div>
<span class="title">{{ topic.title }}</span>
<div class="text">{{ topic.text }}</div>
</div>
</template>
You could do something like:
<template v-for="topic in $store.state.forum.topics">
<div class="topic" #click="toggleCollapsation">
<div class="date">{{ topic.user }}, {{ topic.date }}</div>
<span class="title">{{ topic.title }}</span>
<div class="text" v-show="isCollapsed">{{ topic.text }}</div>
</div>
</template>
<script>
export default {
data() {
return {
isCollapsed: false
};
},
methods: {
toggleCollapsation() {
this.isCollapsed = !this.isCollapsed;
}
}
};
</script>
Instead of v-show you can also use v-if. The differences are (from the official docs):
v-if vs v-show
v-if is “real” conditional rendering because it ensures that event
listeners and child components inside the conditional block are
properly destroyed and re-created during toggles.
v-if is also lazy:
if the condition is false on initial render, it will not do anything -
the conditional block won’t be rendered until the condition becomes
true for the first time.
In comparison, v-show is much simpler - the
element is always rendered regardless of initial condition, with just
simple CSS-based toggling.
Generally speaking, v-if has higher toggle
costs while v-show has higher initial render costs. So prefer v-show
if you need to toggle something very often, and prefer v-if if the
condition is unlikely to change at runtime.
https://v2.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show
I wouldn't read the topics directly from the $store global though. Assuming you're using VueX, I would use mapGetters in the parent view and feed the topic's component through props.
For added sugar you can take a look at Vue transitions: https://v2.vuejs.org/v2/guide/transitions.html