How to fire an event when v-model changes?
This happens because your click
handler fires before the value of the radio button changes. You need to listen to the change
event instead:
<input
type="radio"
name="optionsRadios"
id="optionsRadios2"
value=""
v-model="srStatus"
v-on:change="foo"> //here
Also, make sure you really want to call foo()
on ready... seems like maybe you don't actually want to do that.
ready:function(){
foo();
},
How trigger click event after v-model's change on vue?
Use change
event instead of click
:
<div id="app">
<b-form-checkbox
v-model="status"
name="checkbox"
@change="checkBoxClicked"
>
I accept the terms and use
</b-form-checkbox>
</div>
How to fire function after v-model change?
I think your problem is with the scoping of this
in your success handler for http. Your articles
object in Vue component is not getting any values from your http.get(..)
success handler.
Inside your ready
function, your http success handler should be as follows:
this.$http.get('posts').then(response => {
this.articles = response.body; // 'this' belongs to outside scope
});`
Alternatively you can also do:
var self = this; // self points to 'this' of Vue component
this.$http.get('posts').then(response => {
self.articles = response.body; // 'self' points to 'this' of outside scope
});`
Another similar issue: https://stackoverflow.com/a/40090728/654825
One more thing - it is preferable to define data as a function, as follows:
var articlesVM = new Vue({
el: '#search',
data: function() {
return {
articles: [],
searchInput: null
}
},
...
}
This ensures that your articles object is unique to this instance of the component (when you use the same component at multiple places within your app).
Edited after comment #1
The following code seems to work alright, the watch
function works flawlessly:
var vm = new Vue({
el: '#search',
template: `<input v-model="searchInput" class="center-align" id="searchInput" type="text" >`,
data: {
searchInput: ""
},
watch: {
searchInput: function() {
console.log("searchInput changed to " + this.searchInput);
}
}
})
The input
in template is an exact copy of your version - I have even set the id
along with v-model
, though I do not see the reason to set an id
Vue.js version: 2.0.3
I am unable to see any further, based on details in the question. Can you check if your code matches with the one above and see if you can get the console debugging messages?
Edited after comment #4, #5
Here is another thought which you need to verify:
- Role of vue.js: Render the DOM
- Role of salvattore plugin: Make the DOM layouts using CSS only
Assuming the above is true for salvattore plugin, and hopefully it does not mess with vue.js observers / getters / setters, then you can do the following: provide a time delay of about 50 ms so that vue.js completes the rendering, and then call the salvattore plugin to perform the layouts.
So your watch function needs to be as follows:
watch: {
searchInput: function (){
setTimeout(function(){
salvattore.rescanMediaQueries();
}, 50);
}
}
Alternatively you may also use Vue.nexttick()
as follows:
Vue.nextTick(function () {
// DOM updated
})
The nextTick
is documented here: https://vuejs.org/api/#Vue-nextTick
I do not know if you may need to provide a little bit of extra time for salvattore plugin to start the layouts, but one of the above should work out.
Let me know if it works!
Fire Event When Model Value Change in Vue JS
You can use a watcher for this
<select v-model="selected.applicationType" class="form-control">
<option v-for="item in applicationTypes"
v-html="item.text"
v-bind:value="item.value"></option>
</select>
export default
{
data()
{
return {
selected:
{
applicationType: null
}
}
},
watch:
{
'selected.applicationType'(newVal)
{
this.applicationTypeChanged(newVal);
}
},
methods:
{
applicationTypeChanged(newValue)
{
...
}
}
}
Watch is not firing when v-model changes
It doesn't look like type="date"
fires an input
event till there's a whole date in the input. If you use the picker it'll fire, but if you update each piece separately it won't fire till the month, day AND year is filled in. https://jsfiddle.net/tg2s4kkq/1/
What I'd do it set selectedDate
to a default value and mark the field required so the user can't empty it.
https://jsfiddle.net/tg2s4kkq/3/
Vue JS call function on v-model data() change
So I managed to find a solution, the issue was in a different function.
In data(), I had 2 variables, which I was altering in a different function.
data(){
return{
inputDate: new Date().toISOString().slice(0, 10),
topValue: 0,
heightValue: 78,
}
}
fnWithIssue(x,y){
this.topValue = x + this.topValue;
this.heightValue = y + this.heightValue;
return{
top: `${topValue}px`,
height: `${heightValue}px`,
}
}
Then in a template, I was passing the aforementioned return as Inline styling, the template was in turn inside a v-for, which caused the infinite loop
Instead I was able to fix the issue by removing the data's topValue and heightValue and just decalred them in the fnWithIssue(x,y)
fnWithIssue(x,y){
let topValue = x + topValue;
let heightValue = y + heightValue;
return{
top: `${topValue}px`,
height: `${heightValue}px`
}
}
Related Topics
Invalid Attempt to Spread Non-Iterable Instance
Connection Refused! Is Selenium Server Started
Reinitialize Slick Js After Successful Ajax Call
Recursively Find Keys on an Object
How to Get the Timezone Name in JavaScript
Matching a Forward Slash With a Regex
Reinitialize/Reset Dropzone After Form Is Submitted
How to Get Pasted Value from Reactjs Onpaste Event
Call JavaScript Function Onchange Event of Dropdown List
How to Highlight a Part of Text in Textarea
Passing Data from Node Js to HTML Using Ejs
Html Anchor Tag With JavaScript Onclick Event
Why Am I Not Able to Add Input Text into My Table
Usestate Hook Not Updating a Value
Easiest Way to Mask Characters in Html(5) Text Input