Metro UI using Vue js

[DarkKangaroot]

Hello sir Can i use this framework in Vue js? the datepicker and calendar seem not working in vue js but other input is working..

 <label>Calendar Picker</label>    
                    <input type="text" data-role="calendarpicker" v-model="calendar">
  <label>Date Picker</label>    
                    <input data-role="datepicker" v-model="date"> 

[olton]

Hi 1) What does it mean does not work? 2) To change the picker value, change the attribute value

Please read https://github.com/olton/Metro-UI-CSS/blob/master/CONTRIBUTING.md#issues-guidelines

[DarkKangaroot]

Hi sir this is my html and its id.

<label>Calendar Picker</label>    
                    <input type="text" data-role="calendarpicker" id="calendar">
                    <label>Date Picker</label>    
                    <input data-role="datepicker" type="text" id="date"> 

<button class="button primary drop-shadow" @click="btnDate()">Date/Calendar</button>

i was using this javascript a while ago

var date = document.getElementById("date");
var calendar = document.getElementById("calendar");

 new Vue({
            el: '#app',
            data: {
                datepick: '',
                calendarpick: '' ,
                input: ''
            },
            methods: {
                btnDate: function() {
                   console.log(date .value);
                   console.log(calendar .value)

                }
            }
        })

then i change my variable to this.

var datepick = $('date').data('datepicker')
var calendarpick = $('calendar').data('calendarpicker')

and my vue button

console.log(datepick.val());
console.log(calendarpick.val())

Thank you sir for your Time :)

[olton]

When working with Vue there are problems, now I'm trying to contact the developer Vue, to solve the existing problems.

[olton]

To work with VueJS You must do the following: 1) add meta tag of late initialization Metro 4 <meta name="metro4:init" content="false"> 2) Initialize Metro 4 in the Hooked Mounted

    var app = new Vue({
        el: '#app',
        data: {
        },
        mounted: function () {
            Metro.init();
        }
    })

https://codepen.io/olton/pen/zWomRo

[DarkKangaroot]

Thank you sir its working now sir .. may i mind my last quest sir why i am seeing this sir? i just dont know how to remove this sir

the data field is duplacating also in datepicker sir Thank you sir

[olton]

read above

[DarkKangaroot]

and sir also in select the select is always closing and in console i had this error

Uncaught TypeError: Cannot read property 'close' of undefined

thank you sir

[olton]

create pen on codepen.io

[DarkKangaroot]

in codepen sir there no error.. :( the select is working and also the other input

https://codepen.io/LeoKi12/pen/dmOLbb

[olton]

Make sure you are using the latest version of Metro 4. To check it, execute in the browser console: Metro.about() You must see Metro 4 Components Library - v4.1.0-625

[DarkKangaroot]

yes sir i am using the latest version of Matro Ui.

Metro 4 Components Library - v4.1.0-625

[olton]

Give me the link to the page or create an original page on codepen.io. Without original code, I don't help you.

[DarkKangaroot]

here i am getting the sample https://metroui.org.ua/forms.html

here my code pen but its working https://codepen.io/LeoKi12/pen/dmOLbb

here's my file that not working. and has many duplicate

4. Form.zip

Thank you sir :)

[olton]

In your code:

var app = new Vue({
            el: '#app',
            data: {
                datepick: '',
                calendarpick: '' ,
                input: ''
            },
            created: function(){
                Metro.init();
                Metro.about();
            },  
            methods: {
                btnDate: function() {

                    alert(date.value);
                    alert(calendar.value);

                }
            }
        })

Change created hook to mounted

[DarkKangaroot]

ahh. i already did sir but still the view of input duplication. i had some error in console of browser

Uncaught TypeError: Cannot read property 'close' of undefined

thank you for your help sir :)

[olton]

I do not have errors in the console

[DarkKangaroot]

hmm.. it's weird sir hehe.. im using chrom then i try i on edge and firefox and now it working but in chrome .. still duplication..

[DarkKangaroot]

i think need to update my chrom hehe ..

Thank you so much sir.. i am so much like of metro ui because it's flat desing .. Thank you sir ..

[DarkKangaroot]

oh.. thank you sir.. it's working now.. hehhe