How do I remove the v-on:click event from a div?
<div v-on:click="RegistroT(1)" class="btn btn-secondary btn-block"
:disabled="HoraIngreso !== '00:00'">
<i class="fa fa-clock-o"></i>
<span id="TxtHoraIngreso" v-text="HoraIngreso"></span>
</div>
I tried this in a function called from the VueJS method created when the data is retrieved (from a JsonResult):
$('#TxtHoraIngreso').parent().addClass(this.HoraIngreso !== '00:00' ? 'disabled' : '');
But it does not work.
Basically, when a user registers his time of entry, the next time he enters the web the button must be deactivated.
How do I remove the v-on:click event from a div?
An easy way is to only call the event handler if the state is valid.
<button
type="button"
v-on:click="e => valid && onClickSubmit()"
>
Sign Up
</button>
onClickSubmit() will only be executed if valid = true
<template>
<div class="button-wrapper">
<button class="btn btn-secondary btn-block" :class="{'disabled': isDisabled}" #click="someMethodName"></button>
</div>
</template>
<script>
export default
{
data()
{
return {
isDisabled: false
}
},
methods:
{
someMethodName()
{
setTimeout(() => {
this.isDisabled = true;
}, 3600);
}
}
}
</script>
But maybe I didn't understand your question ;>
Related
So, I'm trying to create a button that when I click it, it should change into a input with a another button for submit. I'm using react and bootstrap.
<div className="cold-md-2 col-sm-3">
<div className="card-body">
<button class="btn btn-lg btn-block btn-group py-3" type="button">New group
<i class="fas fa-plus"></i></button>
</div>
</div>
You should probably create a state indicating wheter should render a button or an input, then on your render you check wich one you should render.
export default class Test extends PureComponent {
constructor(props) {
super(props);
this.state = {
type: 'button'
};
}
toggleType() {
this.setState({
type: this.state.type === 'button' ? 'input' : 'button'
});
}
render() {
if (this.state.type === 'input')
return <span>In here its the input HTML</span>;
return (
<button onClick={this.toggleType.bind(this)} type="button">Toggle</button>
);
}
}
To change the text of a button that has been declared with <input type="button"> tag: use the button's value property. For example:
<input type="button" value="Button Text" id="myButton">Submit</input>
In my angular application I have created the dashboard page in that page I have created one button for start or stop (which is toggle) But it is not working properly.
.component.ts
toggleCollapse(jammer) {
this.jammer.isCollapsed ? 'START' : 'STOP'
this.jammer.isCollapsed ? 'START' : 'STOP'
}
.component.html
<button
type="button"
class="btn btn-warning"
(click)="toggleCollapse()">START</button>
But it is not working properly can anyone help me regarding this.
I guess you want the label of the button to either be START or STOP?
isCollapsed: boolean = true;
toggleCollapse() {
this.isCollapsed = !this.isCollapsed;
}
<button
type="button"
class="btn btn-warning"
(click)="toggleCollapse()">{{isCollapsed? 'START' : 'STOP'}}</button>
.component.ts
public isCollapsed = false;
toggleCollapse() {
this.isCollapsed = !this.isCollapsed
}
.component.html
<button
type="button"
[ngClass]="isCollapsed ? 'btn btn-warning' : 'btn btn-success'"
(click)="toggleCollapse()">
<span *ngIf="isCollapsed"> Stop <span>
<span *ngIf="!isCollapsed"> Start <span>
</button>
Note : You can change the boolean if you want
I have a parent component where user can select skills from a range of options and a child component where user can add their own skill if its not available on the parent component.
The issue is in child component, when a user enters skill into an input element on which I have an #keydown.enter event defined to call a method, to take the input and push it to an array and that all works. The only problem is when keydown.enter event is fired it's also calling a method that is defined in the parent component which changes the state of the options element.
// parent component
<div class="card-body">
<p class="card-subtitle font-weight-bold mb-1">Select Skills</p>
<button
v-for="skill in skills"
:key="skill.id"
:class="[skill.state ? skillSelectedState : skillNotSelectedState]"
class="btn btn-sm m-2" #click="addSkill(skill)"
:value="skill.category">
{{skill.skills}}
</button>
<clientInput></clientInput> // child component
</div>
<script>
import clientInput from './ClientSkillInput.vue'
export default {
data() {
return {
skills: [], // getting skills from an axios call
selectedSkills: [],
}
}
}
methods: {
addSkill(skill) { // this is the method getting called
if (!skill.state) {
this.selectedSkills.push(skill.skills);
skill.state = true;
} else {
let position = this.selectedSkills.indexOf(skill.skills);
this.selectedSkills.splice(position, 1);
// skill.state = false;
}
},
}
// child component
<template>
<div class="form-group mt-2">
<label class="d-block">Not what you're looking for?</label>
<div class="customWraper">
<div class="userSkillbox d-inline bg-secondary"> // will be using v-for to loop on userProvidedSkills and show the user inputs
Rrby on rails
<button class="userSkillboxBtn btn-sm border-0 text-white"> // to remove the input item
<i class="fas fa-times"></i>
</button>
</div>
<input v-model="userInput" type="text" class="d-inline border-0" placeholder="Type to add different skill" #Click="">
</div>
</div>
</template>
<script>
export default {
data() {
return {
isEditable: true,
userInput: '',
userProvidedSkills: [],
}
},
methods: {
addUserInput() {
this.userProvidedSkills.push(this.userSkill);
this.userSkill = '';
}
}
}
</script>
It is not clear where you’re adding the keydown event, but there 2 possible solutions:
1.Use a event modifier on the input to stop propagation
<input #keydown.enter.stop
2.Use the self event modifier on the parent component button
<button
v-for="skill in skills"
#click.self="addSkill(skill)"
:value="skill.category">
{{skill.skills}}
More about event modifiers here
I have a button that is being used to toggle a class on a div to open and close a side menu.
<div id="body-holder" [ngClass]="{'show-nav':isActive}">
<div class="site-wrap">
<button class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
</div>
</div>
In my component.ts file i have the following code.
isActive: boolean = true;
flipper()
{
this.isActive = !this.isActive;
}
however instead of toggling the class when I click the button the page gets reloaded instead and redirects me to my application homepage.
You have to add preventDefault to your click event in this way:
flipper(event: any)
{
event.preventDefault();
this.isActive = !this.isActive;
}
and in your html code:
<button class="toggle-nav" type="button" (click)="flipper($event)">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Set button type attribute to type="button":
<button type="button" class="toggle-nav" (click)="flipper()">
<i class="fa fa-bars" aria-hidden="true" ></i>
</button>
Setting the button type to type="button" might also solve the problem
<button type="button"
It seems your button is inside a form and causes a submit.
Button inside division or form most of the times have default behavior of loading the page. For that reason, It's better to set type attribute of button as "buton".
<button type="button" class="toggle-nav" onclick="flipper()"> <i class="fa fa-bars" aria-hidden="true" ></i></button>
I think there is mistake in function. You missed to mention "funtion" keyword before you define the function. I tried a sample fiddle: here
<script>
isActive: boolean = true;
function flipper()
{
alert("a");
}
</script>
My component code is like this :
...
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
...
<script>
import { mapGetters } from 'vuex'
export default{
props:['idProduct'],
computed: {
...mapGetters([
'status'
])
},
...
</script>
I want add condition in button tag. So when status = success, the button looks like this :
<button type="button" class="btn btn-default" #click="reloadProduct">Close</button>
When status = failure, the button looks like this :
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
Status values taken from the script tag component (See computed)
I try like this :
<button type="button" class="btn btn-default" {{ status == 'success' ? #click="reloadProduct" : data-dismiss="modal"}}>
Close
</button>
But, it does not work
How can I do it?
You cannot bind the event listener dynamically,
but you can create another function and detect the success status like this:
<button type="button" class="btn btn-default" #click="doSomething">Close</button>
<script>
import { mapGetters } from 'vuex'
export default {
props:['idProduct'],
computed: {
...mapGetters([
'status'
])
},
methods: {
doSomething(evt) {
if (this.status === "success") {
// Call the reloadProduct() when the status is `success`.
reloadProduct()
// Remove the `data-dismiss` attribute of the button.
evt.target.removeAttribute("data-dismiss")
} else {
// Add the `data-dismiss` attribute for the button.
evt.target.setAttribute("data-dismiss", "modal")
// Uncomment this if you're trying to close the modal.
// $('#modal').modal('hide');
}
}
}
...
</script>
EDIT: Seems like you want to close the Bootstrap modal, then you can uncomment $('#modal').modal('hide'); in the doSomething() function.
This might not be the best answer but it's a workaround.
if (status === success) {
document.getElementById("yourDivHere").innerHTML =
'<button type="button" class="btn btn-default" #click="reloadProduct">
Close
</button>'
};
and
if (status === success) {
document.getElementById("yourDivHere").innerHTML =
'<button type="button" class="btn btn-default" data-dismiss="modal">
Close
</button>'
More specifically, you could use jQuery like this:
$(this).attr("your attribute", "your value");