I am trying to load and initialize component only when the tab is clicked. The simply example below shows how to put component in content tab. It always initialize with the main component. I ask for advise, how can I make component being loaded after clicked tab?
<tabset>
<tab heading="History of User">
<history-component [someInputProp]="someVariable"></history-component>
</tab>
<tab heading="Session of User">
<session-component [someInputProp]="someVariable"></session-component>
</tab>
</tabset>
use (select)
(select)="onSelect($event)"
example:
<tab heading="Public Holidays" id="tab5" (select)="onSelect($event)">
<ng-container *ngIf="selectedTab == 'Public Holidays'">
<app-public-holiday-setting></app-public-holiday-setting>
</ng-container>
</tab>
in component.ts
export class MyTabsComponent implements OnInit {
selectedTab: string;
constructor() { }
ngOnInit() {
}
onSelect(data: TabDirective)
{
this.selectedTab = data.heading;
}
}
Related
I created a dynamic overlay component with Vue.js to handle the close event, when we click on the screen away from the intended object the object closes my problem here the click event does not work here's my code
<template>
<button
v-if="action"
#click="clicked"
tabindex="-1"
class="fixed z-40 w-full h-full inset-0 bg-black opacity-50 cursor-default"
></button>
</template>
<script>
export default {
name: "Overlay",
props: {
action: Boolean,
},
methods: {
clicked() {
if (this.action === true) {
return false
}
}
}
};
</script
Usually you are not allowed to update properties passed to the component.
The proper way should be for you to emit the click from where it is used like:
clicked() {
this.$emit("clicked");
}
Then when you use the overlay component like:
<overlay #clicked="doSomethingHere"></overlay>
You can alter your toggle variable outside of the component, but within the component you should use data() { action: false } instead of attempting to update properties.
Finally you can read more about properties here: https://v2.vuejs.org/v2/guide/components-props.html
i was looking for the same thing but my solution was to use v-if without if true component doesn't fire
<Toast
v-if="show"
type="error"
description="desc"
/>
<button #click="show = !show">Toast active !</button>
I have a function outside of export default object. How can I make Stop button to change into play button after 1 second?
In Short: I want to change playingStatus into false out of scope.
Please check {N} PlayGround link for question
<template>
<Page>
<ActionBar title="Home" />
<ScrollView>
<StackLayout>
<Image v-show="!playingStatus" #tap="startFunc"
src="https://cdn3.iconfinder.com/data/icons/iconic-1/32/play_alt-512.png"
stretch="aspectFit" />
<Image v-show="playingStatus"
src="https://cdn3.iconfinder.com/data/icons/eightyshades/512/24_Stop-512.png"
stretch="aspectFit" />
</StackLayout>
</ScrollView>
</Page>
</template>
<script>
function playForAWhile() {
setTimeout(stop, 1000);
}
function stop() {
playingStatus =
false; // scope error... How to change vue data from outside?
}
export default {
data() {
return {
playingStatus: false
};
},
methods: {
startFunc() {
this.playingStatus = true;
playForAWhile();
}
}
};
</script>
<style scoped>
</style>
Or instead of changing variable from outside, how can I toggle images without vue object.
Thanks in advance.
I am new in Vue JS. So, if anything wrong never mind.
I am using vue-bulma-tabs module for tabs component. I want to change the tabs dynamically from another component. Here, is a selected props for the currently selected tab. I want to change the selected props value by global variable so that I can show any tab from any component.Is it possible if not what is the solution? If possible, please answer me as soon as possible.
Here is my current tabs code:
<tabs>
<tab name="About Us">
<h1>This part is about us
</h1>
</tab>
<tab name="About our culture">
<h1>This part is about our culture
</h1>
</tab>
<tab name="About our vision" selected="selectedTab">
<h1>This part is about our vision
</h1>
</tab>
</tabs>
<button type="button" #click="GoTab ()">Go to tab</button>
I want when I click Go to tab button then it will go to About our vision tab.
My Vue Js code:
<script>
import TabParentComponent from
'../../components/layout/tabParentComponent.vue'
import TabChildComponent from
'../../components/layout/tabChildComponent.vue'
export default {
components: {
'tab': TabChildComponent,
'tabs': TabParentComponent
},
data () {
return {
selectedTab: false
}
},
methods: {
GoTab () {
this.selectedTab = true
}
}
}
</script>
It works when seletedTab = true in data section. But I want to when button click it will be true otherwise false.
Especially, I want to keep a vuex store data. Depending on store value selectedTab will be true or false.
look this version with vuex
seletedTab is a getters, use it anywhere in the app.
Vue Js code:
<script>
import TabParentComponent from
'../../components/layout/tabParentComponent.vue'
import TabChildComponent from
'../../components/layout/tabChildComponent.vue'
import { mapGetters, mapActions } from 'vuex'
export default {
components: {
'tab': TabChildComponent,
'tabs': TabParentComponent
},
computed: {...mapGetters([
'selectedTab'
])
},
methods: {
...mapActions([
'GoTab'
])
}
}
</script>
Do not forget that the structure of the application with vuex will be slightly different! See Application Structure
I'm trying to build a custom element in Aurelia. At this point, this is what I have:
item.html
<template>
<span>${someProperty}</span>
</template>
item.ts
import {bindable} from 'aurelia-framework';
class Item {
#bindable someProperty: string;
}
parent.html
<template>
<require from="./item"></require>
<item repeat.for="item of items"></item>
</template>
parent.ts
class Parent {
items: Item[];
loadItems() {
// at this point, I'm sure that items is getting populated.
this.items = dataservice.loadItems();
}
}
I can't seem to find anything in the documentation that covers this scenario. What I'm getting, is that the span is empty. I'm not getting any errors in the console. Am I going about this the right way?
You need to bind to the item's someProperty. The following assumes that items[] is an array of strings.
<div repeat.for="item of items">
<item someProperty.bind="item"></item>
</div>
Sorry about the formatting, I'm on my phone.
You need to use the custom element and the bindable property. You also need to register the class as a custom element. Try this:
item.html
<template>
<span>${someProperty}</span>
</template>
item.js
import {bindable, customElement} from 'aurelia-framework';
#customElement('item')
class Item {
#bindable someProperty: string;
}
parent.html
<template>
<require from="./item"></require>
<item repeat.for="item of items" someProperty.bind="item"></item>
</template>
parent.ts
class Parent {
items: Item[] = [
'trees',
'swans',
'capes',
'a horse',
'triangles',
'witches',
'a different horse'
];
}
For more information, take a look at a few of my blogs on custom elements and custom attributes like this one: http://davismj.me/blog/semantic-custom-element/
In Aurelia, say I have custom component named popup that has an open and close method on it. I can call those methods in the component, but how would I call them from outside the component?
app.html:
<template>
<require from="popup"></require>
Pop-up test
<popup>
<popup-body>
<button click.trigger="close()">Close</button>
</popup-body>
</popup>
</template>
popup.html:
<template>
<button click.trigger="open()">Open</button>
<button click.trigger="close()">Close</button>
<div class="popup" show.bind="visible">
Pop-up!
<content select="popup-body"></content>
</div>
</template>
popup.js
export class Popup {
constructor() {
this.visible = false;
}
open() {
this.visible = true;
}
close() {
this.visible = false;
}
}
Notice in app.html I'm adding a button to try to close the modal. Obviously close() won't work because it is looking for that method in app.js. How do I call the close method in popup.js?
Here is a working Plunker example of the above.
You can get a hold of the view model of the component by using view-model.ref:
<popup view-model.ref="popup">
and then call close:
export class App {
close(){
popup.close();
}
}
here is the plunker
Oh, I think I figured it out with view-model.ref
<template>
<require from="popup"></require>
Pop-up test
<popup view-model.ref="popup">
<popup-body>
<button click.trigger="popup.close()">Close</button>
</popup-body>
</popup>
</template>