Can someone help me to write a method, that lets me remove entire b-card after clicking the icon with #click ?
b-card
b-col.message.d-flex.justify-content-between.p-0(lg="12")
b-col.d-flex.align-items-center(lg="11")
b-icon.mr-2.msg(icon="exclamation-circle" variant="success")
p.font-weight-bold.m-0.mr-2 Message
p.mb-0.msginfo - Update your measurements.
b-col.d-flex.align-items-center(lg="1")
p.mb-0.msginfo.font-weight-bold 11:20
b-icon.ml-2(icon="x-circle" variant="danger" #click="removeNotification")
```
You could create a new variable like showCard initially set to true and in
removeNotification() { this.showCard = false }
and in your template b-card(v-show="showCard"). This will remove the card when showCard is false.
Related
I created a CDropdown with a CInput inside. I don't want the dropdown auto close when I click outside because I want to copy text somewhere and paste to CInput. How can that be? Thanks for your help.
<CDropdown :show.sync="isShow">
<template>
<CInput
label="Sample label"
type="text" />
</template>
</CDropdown>
Finally I do it by read sourcecode of CDropdown and do workaround:
First, set ref to CDropdown:
<CDropdown ref="refDropdown" :show.sync="isShow">
Then override hide() function of CDropdown, be sure to call $forceUpdate() to update the directive of CDropdown:
this.$refs.refDropdown.hide = function() {
console.log("Prevented hide");
}
this.$refs.refDropdown.$forceUpdate();
I would like a clearable v-text-field with a label to show a computed string property based on other another property (a boolean in this simplified example).
Initially it works, the correct default string value is shown.
If I invert the boolean with a button from outside the v-text-field component, the next correct string value is shown as expected.
But if I use the clear button in the v-text-field to invert the boolean, the v-text-field clears and uses the label in the input field when focus is lost, and therefore not using the expected string value.
Input:
<v-text-field :value="text" label="Just a label" clearable #click:clear="booleanModel = true;"></v-text-field>
Computed property:
text: function() {
if(this.booleanModel) {
return 'Its on'
} else {
return 'Default text';
}
}
As far as I can see via vue dev tools, the state in the v-text-field is the same either way.
How come, and how to avoid this?
Please refer to this example: https://codepen.io/fasterlars/pen/RwKrzXZ?editors=1010
To be honest your use-case seems very strange but...
The problem is that v-text-box has some internal state (according to source code comments to make it work without the model) and on clear icon click it sets it to null but it does this in the nextTick - source. This is little bit strange but they probably has some reasons to do so...
So if you don't want to really clear the content but instead set it to something else, do not use default "clearable" functionality and use append slot instead:
<v-text-field :value="text" label="Just a label">
<template v-slot:append>
<v-icon #click="booleanModel = true">clear</v-icon>
</template>
</v-text-field>
When you click on the clear button, the value of booleanModel does not change.
You need to update the #click:clear = "booleanModel = false;".
Also, add a :key="booleanModel in your text field, which will ensure that whenever the value of booleanModel changes it will re-render the v-text-field component again.
I'm trying to disable or enable a button based on checkboxes. if two more are checked the button is no longer disabled. This part works but I'm not sure how to disable the buttons again if I uncheck items.
i'm new to vue but I'm wondering how to find out if each checkbox has been either checked OR unchecked so I can correctly move my counter up or down.
<li class="listItemsModal" v-for="(student, index) in students">
<input v-model="student.exclude" #change="toggleAddButton" id="student.index" type="checkbox" >
{{student.first_name}}
</li>
if the button is clicked we add and check to see if the value is bigger than 2
I need some way to access the checked value to see if checked or not, then go up or down accordingly
toggleAddButton: function(){
console.log(this.studentsAdded)
this.studentsAdded ++
if(this.studentsAdded >= 2){
this.disableAdd = false
}else{
this.disableAdd = true
}
}
There are a bunch of ways to do this, some are easier or harder depending on your data structures.
If your students array is fully reactive you could have a computed property that updates any time that object changes. Something like:
// ... vue stuff...
computed:{
// ... your other computed properties
enoughBoxesChecked(){
// you could also use an accumulator, but this is very easy to read.
return this.students.filter(student=>student.exclude).length > 2;
}
}
// ... other vue stuff
Then you could use that enoughBoxesChecked computed property on the button you want to disable. Something like <button :disabled="enoughBoxesChecked">....
I am using Vue 2 and I am using an anchor tag as a "button" (for styling purposes with an svg).
The drawback of using an anchor tag in this way is that you can't disable it in the same way as a button.
I would like to make a vue component that simply wraps an anchor tag. I would like the component to pass all properties of the custom component onto the child anchor tag so that someone can use it like this:
<custom-comp id="closeButton" title="Close" class="c-btn" #click="close" :disable="true"></custom-comp>
I want to intercept the click on the child anchor tag and only emit that if the component is not disabled.
How can I achieve this?
You can't. disable property is used only in form elements. What you're looking for here is to use v-if:
<a id="closeButton" title="Close" class="c-btn" #click="close" v-if="isConditionMatched">
Only show if isConditionMatched returns true
</a>
Or, conditionally you can use return false statement inside your method:
close() {
if(!isConditionMatched) return false;
// continue your close function
}
I have a simple dom-if in a template:
<div>
<template is="dom-if" if="{{checkListEmpty()}}" restamp>
<paper-button raised class="init" on-tap="initialize">Initialize</paper-button>
</template>
</div>
and a function to show or hide.
checkListEmpty() {
return this.todos.length == 0;
}
It works for the first time only. If the this.todos.length becomes 1 then the template does not goes away. How can i hide when the condition is false.
There is no binding working for your function because there is no property to bind.
To make it work you should add a property in parameter : checkListEmpty(foo).
Like that, everytime the property foo change the function will be executed.
However an array as property won't work if the content of this one changed (content pushed) except if this is the global array property that is replaced :
var bar = [], foo = ["ggg"];
bar = foo;
In that case the function will be called, but it's not great.
Anyway for your question you can use an hidden property for the paper-button or bind the DOM-IF with the table length.
<template is="dom-if" if="[[!bar.length]]" restamp>
<paper-button raised on-tap="addBar">Initialize</paper-button>
</template>
or
<paper-button raised on-tap="addBar" hidden="[[bar.length]]">Initialize</paper-button>
And then everytime a property is added into the array or removed until there is nothing in it your button will be displayed or not.
You can see a working jsfiddle (use chrome though and be patient for the initialization.. comment here if it's not working)