Hey there another question:
i have a div named group in the group i have several blocks/divs below the group
the group(parent) is here:
<div v-if="block.blocktype == 'partial'">
<h1>{{block.name}}</h1>
<component v-if="block.template_path" :is="block.template_path" :key="block.template_path" v-bind:bduuid="block.uuid" v-bind:block_data="block.block_data">
</component>
</div>
div component like this:
<v-date-picker
ref="picker"
v-model="date"
:picker-date.sync="pickerDate"
:events="arrayEvents"
event-color="green lighten-1"
full-width
reactive="true"
:locale="this.localication"
></v-date-picker>
</div>
<span style="color: blue;" #click="CreateNewAppintmentFunction()">Create new Appointment</span>
so now i want to change the child view from "show" to "new" after click
with a this.$router.push("appointment/quickedit");the
CreateNewAppintmentFunction()
anyone a idea how i can change the router path from "show appointment" to "new appointment"
thanks a lot
I don't know if I get correctly, but if you want to have dynamic path for page. You can do something like this
For example:
{ path: "baseurl/:appointment/quickedit", component: YourComponent, name: yourComponentName ... }
You can set your key word as router param.
this.$router.push("baseurl/show_appointmen/quickedit")
this.$router.push("baseurl/edit_appointmen/quickedit")
and in mounted hook you can get appointment param, and do your logic.
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'm making a link/button component which either can have a button or an anchor wrapper, a text and an optional icon. My template code below is currently rendering either an anchor or a button (with the exact same content) based on an if statement on the wrapper element, resulting in duplicate code.
<template>
<a v-if="link" v-bind:href="url" class="btn" :class="modifier" :id="id" role="button" :disabled="disabled">
{{buttonText}}
<svg class="icon" v-if="icon" :class="iconModifier">
<use v-bind="{ 'xlink:href':'#sprite-' + icon }"></use>
</svg>
</a>
<button v-else type="button" class="btn" :class="modifier" :id="id" :disabled="disabled">
{{buttonText}}
<svg class="icon" v-if="icon" :class="iconModifier">
<use v-bind="{ 'xlink:href':'#sprite-' + icon }"></use>
</svg>
</button>
</template>
Is there a more clean way for wrapping my buttonText and icon inside either an anchor or button?
I've solved my issue by intensive Google-ing! Found this issue regarding Vue on Github which pointed me in the right direction.
Small piece of backstory
I'm using Vue in combination with Storybook to build a component library in which a button can either be a button or an anchor. All buttons look alike (apart from color) and can be used for submitting or linking. To keep my folder structure ordered, I would like a solution that generates a multiple buttons types (with or without link) from one single file.
Solution
Using computed properties I'm able to "calculate" the necessary tag, based on the url property of my component. When a url is passed, I know that my button has to link to another page. If there is no url property it should submit something or preform a custom click handler (not in the sample code below).
I've created the returnComponentTag computed property to avoid placing any complex or bulky logic (like my original solution) in my template. This returns either an a or a button tag based on the existence of the url property.
Next, as suggested by ajobi, using the :is attribute I'm able to define the component tag based on the result of my computed property. Below a stripped sample of my final (and working) solution:
<template>
<component :is="returnComponentTag" v-bind:href="url ? url : ''" class="btn" :class="modifier" :id="id">
{{buttonText}}
</component>
</template>
<script>
export default {
name: "Button",
props: {
id: {
type: Number
},
buttonText: {
type: String,
required: true,
default: "Button"
},
modifier: {
type: String,
default: "btn-cta-01"
},
url: {
type: String,
default: ""
}
},
computed: {
returnComponentTag() {
return this.url ? "a" : "button"
}
}
};
</script>
You could extract the wrapping element into a dedicated component.
<template>
<a v-if="link" v-bind:href="url" class="btn" :class="modifier" :id="id" role="button" :disabled="disabled">
<slot></slot>
</a>
<button v-else type="button" class="btn" :class="modifier" :id="id" :disabled="disabled">
<slot></slot>
</button>
</template>
// You would use it like this
<SomeComponent /* your props here */ >
{{buttonText}}
<svg class="icon" v-if="icon" :class="iconModifier">
<use v-bind="{ 'xlink:href':'#sprite-' + icon }"></use>
</svg>
</SomeComponent>
There are multiple ways of doing this. Two examples would be the following based on the point of view:
You are defining two different components (Button or Anchor) and want to use a wrapper to render either one of them.
You could seperate the Wrapper Content into two components so that the wrapper only decides on which of the components to render (either the Button or the Anchor).
The problem with this approach could be you will have doubled code for methods and styling for the button and anchor component.
You are defining the content as a component and use the wrapper to define what to wrap the content in.
See Answer of https://stackoverflow.com/a/60052780/11930769
It would be great to know, why you would want to achive this. Maybe there are better solutions for your usecase. Cheers!
How to pass attributes from component to slot?
This is in component
<navigation-link url="/profile">
Your Profile
</navigation-link>
Then in the template I want to use url
<template>
<div>
<a
v-bind:href="url"
class="nav-link">
<slot></slot>
</a>
<span class="active></span>
<div>
</template>
according to docs this should work, but instead I get error: Property or method "url" is not defined on the instance but referenced during render.
I think you want to put the text "Your Profile" in <slot></slot>
So, for this, you need to do this.
<navigation-link url="/profile">
<template slot="text">
Your Profile
</template>
</navigation-link>
And in the component, name the slot like this
<template>
<div>
<a
v-bind:href="url"
class="nav-link">
<slot name="text" />
</a>
<span class="active></span>
<div>
</template>
Probably, this work.
EDIT:
according to docs this should work, but instead I get error: Property or method "url" is not defined on the instance but referenced during render.
That is because, you are not declaring url in the component, you probably need to put
props: ['url'],
data() {
return {
propUrl: this.url
}
}
and in the template use this.propUrl
Regards
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.
New to VueJS... I have a component that I want to pass other components into based on the selection made in a dropdown. I have a main template that will always be rendered on the screen, part of which has a dropdown. When I make a selection in that dropdown I want to have a div inside that main component with an ID (or some other identifying property) and push another template inside of it. I'm thinking that a slot does the opposite of what I want..
Original Template:
<div class="search-field-with-label-container">
<el-select v-model="serviceType">
<el-option
v-for="serviceType in serviceTypes"
:key="serviceType.id"
:value="serviceType"
>{{ serviceType }}</el-option>
</el-select>
<div id="thisIsWhereIWantMyOtherTemplateToRender"
</div>
Second template:
<template>
<h1>this is the other template</h1>
</template>
You can use dynamic components with the keep-alive tag.
<keep-alive>
<component v-bind:is="selectedComponent"></component>
</keep-alive>
Documentation is here.