Materialize modal popup is working properly in onclick functions, but not working in mounted() or created()
testingmodel:function(){
$('#firstlogintour').modal('open');
}
mounted() {
this.testingmodel();
},
I have called the same function from VueJs updated event
updated()
{
this.testingmodel();
},
** But you have to avoid the errors by using try catch on calling function
testingmodel:function(){
$('#firstlogintour').modal('open');
}
Vue Updated Scenario:
This function will call up to when the function or method loads without failure or any Error.
Related
How to execute the command wire: poll.10000ms in livewire using jQuery code. I check inside the view with jQuery that the input value is not empty and then this command must be executed.
is it possible?
if (! $('#unitValue').val().length === 0) {
//Run wire:poll.10000ms="reUnit" with Jquery code
}
You could probably do something to add the wire:poll.10000ms="reUnit" onto an element in your page, but personally I would use setInterval to raise an event that Livewire will listen for on your Component.
Livewire Component
protected $listeners = [
'reUnit'
];
public function reUnit()
{
// do something here
}
Blade File
<script>
document.addEventListener('DOMContentLoaded', function (e) {
setInterval(() => Livewire.emit('reUnit'), 10000);
})
</script>
ALl we're doing here is creating a timer that ticks every 10 seconds and then fires the function we've provided which in this case is a Livewire event.
I am opening a modal component from a Nativescript-Vue function which opens fine
this.$showModal(SuccessModal).then(() => { console.log('Modal Closed') });
I can call $modal.close from a button within the modal but getting $modal is undefined if I try to call this from, say, the mounted() hook.
I want the modal to close on its own after a three second timeout rather than the user having to click outside of the modal.
How would I go about this?
When using the traditional syntax for function you loose the current context (this), use arrow functions to avoid that.
setTimeout(() => {
this.$modal.close();
}, 3000);
Or you will have to keep reference to context in a variable
var me = this;
setTimeout(function() {
me.$modal.close();
}, 3000);
Here's a twist on #Manoj's response.
Instead of using an external variable to bind the global this, you could use a .bind() in your native (non-arrow) function if you're inclined to do so, like this:
setTimeout(function() {
this.$modal.close();
}.bind($this), 3000);
Im using bootstrap vue:
<b-form-checkbox #change="onoff('concurency_filter')" v-model="concurency_filter.onoff" switch size="lg"></b-form-checkbox>
And I need call ajax with state of this checkbox:
onoff: function (filter) {
axios.put('/api/user/accounts/'+this.account_id+'/togglefilter',
{
filter: filter,
status: this[filter].onoff //here still old value in this.concurency_filter.onoff
}).then(response => {
..........
});
},
But v-model still not changed when ajax is called. When checkbox clicked v-model must toggle true/false, but ajax called before v-model toggle it. How to deal with it?
I know that I can use WATCH in vue, but when first time ajax loading data it's triggering this WATCH event. I want trigger it only on click
Success:
onoff('concurency_filter', $event)
$event will contain exact value of checkbox right after click
I am need a reusable, global dialog/modal component in my vue application. I need to be able to call it from any component and update its header text, body text and callback function once the dismiss button is pressed on the modal. I have tried importing a custom made dialog component into each component where I plan to use it and I have tried creating a global dialog where the values would be set using a mutable values in a modals vuex modal. This latter did not work because vuex will not store functions as values. I am new to vue and am not too sure how to go about this and absolutely any advice on a good way to go about it would help tremendously.
I did something like that before. The main ingredient is the handling of events through the $root because you can't relay in this scenario on the normal component communication.
// In your Global Modal
<script>
export default {
name: 'GlobalModal',
mounted () {
this.$root.$on('callGlobalModal', () => {
this.dialog = true
})
},
data: () => ({
dialog: false,
}),
}
</script>
Then call it frome anywhere using this.$root.$emit('callGlobalModal')
I have a vue object and in the mounted method I test for a scroll event on the browser
mounted() {
self= this;
$(window).scroll(function(){
$.get("/works?start="+$('#loaded_max').val(), function(loaded){
self.work = loaded;
console.log(self);
});
});
console.log(self) //returns window
console.log(this) //returns ajax
How do I access the vue object? Specifically the data so I can update the variable.
Self appears to be window, any other variable works
so
mounted() {
let myvue = this;
$(window).scroll(function(){
$.get("/works?start="+$('#loaded_max').val(), function(loaded){
myvue.work = loaded;
console.log(myvue.work);
});
});
I have always used that technique to reference the 'current object' when scope is an issue but it obviously has issues when you need to reference something other than the window.