I wonder if it is possible to load value of tag value as default value for vue.js data?
Works fine with
coupon: $('#coupon').val(),
but I really do not want to use jQuery.
Code is available here: https://jsfiddle.net/4a80dnfo/1/
So I found a way to get this done using the beforeMount() hook.
Assuming this HTML:
<div id="coupon-code">
<input ref="coupon" v-model="coupon" value="99PI_ORG" />
</div>
This Javascript should get the job done:
new Vue({
el: '#coupon-code',
data: {
coupon: ''
},
beforeMount: function() {
this.coupon = this.$el.querySelector('[ref="coupon"]').value;
}
// methods and such here.
}
});
I ended up using the beforeMount() hook after some trial an error. Some things I've learned which may be relevant:
this.$refs does not exist in the created() hook.
this.$refs.coupon.value returns an empty string in the mounted() hook.
The ref attribute of an element is deleted before the mounted() hook, so something like this.$el.querySelector('input[ref=coupon]') does not work.
You can use this.$el.querySelector('input[data-ref=coupon]').attributes['value'].value inside mounted(), but this seems worse to me than using beforeMount().
If anyone has suggestions on how to do this better, I'm very open to feedback. This solution still feels sub-optimal to me.
In your jsfiddle you are using v-model, so in your data() you just have to set your desired value
Edit: updated code to use v-bind
new Vue({
el: '#app',
data: {
coupon: 'You value here',
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.js"></script>
<div id="app">
<input id="coupon" type="text" name="coupon" :value="coupon" />
</div>
<input name="coupon" v-model="coupon" value="def val">
window.app = new Vue({
el: '#xxx',
data: {
coupon: document.querySelector("input[name=coupon]").value
}
...
});
Related
In order to ease the styling of my page, I'd like to create a bunch of mini components like, and exploit how attributes are merged in VueJs. So for example, here is a minimal js file also hosted on this JSFiddle:
Vue.component('my-button', {
template: '<button style="font-size:20pt;"><slot></slot></button>'
})
var app = new Vue({
el: "#app",
data: {
message: "world",
},
methods: {
sayHello: function () {
alert("Hello");
}
}
})
and then in my html I just want to use <my-button> instead of button:
<div id="app">
Hello {{message}} <my-button #click="sayHello" style="color:red;">Style works, but not click</my-button> <button v-on:click="sayHello" style="color:red;">Both works</button>
</div>
Unfortunately, it seems that attributes are merged, but not listeners, so it means that I can't do v-on:click on my new button... Any way to make it possible?
Thanks!
-- EDIT --
I saw the proposition of Boussadjra Brahim of using .native, and it works, but then I found this link that explains why it's not a great practice and how to use v-on="$listeners" to map all listeners to a specific sub-button. However, I tried, to just change my template with:
template: `<button style="font-size:20pt;" v-on="$listeners"><slot></slot></button>`,
but I get an error:
Vue warn: Property or method "$listeners" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option."
Here is the JSFiddle.
Your fiddle didn't work because you were using an old version of Vue, $listeners was added in Vue 2.4.0.
Here's a demo:
Vue.component('my-button', {
template: '<button style="color: red" v-on="$listeners"><slot/></button>'
})
new Vue({
el: '#app',
methods: {
sayHello() {
alert('Hello')
}
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<my-button #click="sayHello">Custom Button</my-button>
<button #click="sayHello">Ordinary Button</button>
</div>
I am trying to get v-bind:value on to function reservationBy() as load event instead of v_on:clickevent. Right now it passes the value when I click on it only.
Is there a way to make it load automatically or use mouse over event? I even try to use v-on:load and v-on:focus event but it did not work.
View
<div id="app">
<input v-bind:value="2" v-on:click="reservationBy"/>
</div>
Script
new Vue({
el: "#app",
data: {
},
methods: {
reservationBy: function(e) {
var peopleBookedId = e.target.value;
console.log(peopleBookedId);
}
}
})
Here is example on JSFIDDLE
https://jsfiddle.net/ujjumaki/yz0p1vqL/4/
#mouseover and #mouseleave will do the job.
<input v-bind:value="2" #mouseover="reservationBy"/>
or
<input v-bind:value="2" #mouseleave="reservationBy"/>
If using v-model is not an option (that would be the easiest way), and you want to execute the function when component is rendered, you can use ref and access value in mounted hook:
<input ref="myInputRef" :value="2" />
Script:
mounted: function() {
console.log(this.$refs.myInputRef.value);
}
I'm attempting to incorporate vee-validate validation (version 2) against a basic/simple radio input, such as:
<div id="app">
<form id="webform" action='post.php' method='POST' #submit.prevent="doSubmit()">
<input type='radio' name='color' value='blue'> Blue<br>
<input type='radio' name='color' value='pink'> Pink
</form></div> <!-- div id app -->
<script>
Vue.use(VeeValidate);
new Vue({
el: "#app",
template: '#app',
data() {
return {
p_arr_condition_id: null,
};
},
methods: {
doSubmit() {
this.$validator.validateAll().then(function(result){
if (!result){
//this means a validation failed, so exit without doing anything
return;
}
//here you would put your form submit stuff
window.onbeforeunload = null;
document.getElementById('webform').submit();
});
}
}
});
</script>
But I'm unsure where to begin. I discovered a working example here, however I'm not showing how to actually implement their example. Their Docs link results in a 404.
Any help/guidance would be super appreciated.
The demo iframe has a not-so-obvious slider on the left side that allows you to see the code used in the example. You can also go directly to the code sandbox
I have an issue where the Vue object is undefined in the browser, after I load in Vue with RequireJS. I'm not sure what's going on, I hope someone has some pointers to focus on.
Something worth noting is that I'm placing this code through our custom framework into a MVC C# application. Ultimately the code is placed in views and served along all other JS / HTML.
The HTML is placed first, after which the script is executed.
HTML:
<div id="aapje">
{{ message }}
</div>
JS:
require(['https://unpkg.com/vue'], function() {
var appje = new Vue({
el: '#aapje',
data: {
message: 'Hello Vue!'
}
});
});
Console dump:
Codepen: https://codepen.io/olafjuh/pen/oKWKXG
To achieve expected result, pass 'Vue' as parameter to callback funtion of require
working code sample
require(['https://unpkg.com/vue'], function(Vue) {
var appje = new Vue({
el: '#aapje',
data: {
message: 'Hello Vue!'
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.3/require.min.js"></script>
<div id="aapje">
{{ message }}
</div>
codepen - https://codepen.io/nagasai/pen/WVjVoV
Is there a way to bind input to objects instead of single variables.
I know we can do this simple trick
<input v-model="name">
But the following doesn't work:
<input v-model="user.name">
That's what i was used to in Angular, is there a way to achieve this in vue.js?
you can bind directly to data, code as follow:
var demo = new Vue({
el: "#demo",
data: {
user: {
name: "please enter"
}
}
})
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<div id="demo">
<input v-model="user.name">
<span>{{user.name}}</span>
</div>
This works in Vue as well, make sure to define complete object in data which will make it reactive, Here is a working fiddle.
Vue Code:
var demo = new Vue({
el: '#demo',
data: function(){
return {
user: {
name: 'This is working fine'
}
};
}
})