Can I get an input value with Vue?

I'm using Vue.js 2 and Materialize in my website and I want to use Materialize's Date Picker. I was using

<input name="test" type="text" v-model="test">

And changed it to

<input name="test" type="date" class="datepicker">

I removed v-model since it won't work. Materialize uses pickadate.js and pickadate creates a hidden input to hold the selected date. On Chrome it shows like this:

<!-- my original input -->
<input name="" type="text" class="datepicker picker__input picker__input--target" readonly="" id="P162227149" tabindex="-1" aria-haspopup="true" aria-expanded="false" aria-readonly="false" aria-owns="P162227149_root">

<!-- the one it creates -->
<input type="hidden" name="test">

Since I can't make pickadate generate an input with v-model I've added this to my submit method:

this.test = $("input[name=test]").val();

It works great, but is there a way to do this using only Vue? Second question(a personal question), is it bad practice to use jQuery with vue this way?

gabrielbuzzi

9 years ago

Level 8

Something you need to understand. VueJS is not like jQuery so the things you need to implement you just need to use native javascript.

So what you need to do can be done in two ways.

Using refs from vue

<input type="hidden" name="test" ref="myTestField">

<script>
new Vue ({
    created () {
        console.log(this.$refs.myTestField.value)
    }
})
</script>

Second way only native javascript

<input type="hidden" name="test">

<script>
new Vue ({
    created () {
        const field = document.querySelector("input[name=test]").value
        console.log(field)
    }
})
</script>

In both examples i used the created method from Vue, but you can use in any other, computed values, custom methods, etc...

gpressutto5

9 years ago

Level 7

@gabrielbuzzi The first one I cannot use, since I the hidden input is created by pickadate. The second one seems to be exactly the same I've used, but without jQuery, right? I didn't understand your first paragraph. Do I NEED to use only native javascript?

gabrielbuzzi

9 years ago

Level 8

You don't need, but what is the point of using Vue if you gonna use jQuery?

1 like

gpressutto5

9 years ago

Level 7

The point is binding data. Is it ok to use a computed value that gets element's value every tick?

Please or to participate in this conversation.