[Vuejs]-Can Vue model data property be equal to value that is returned by another Vue data property object?

by

1👍

✅

Use a computed property like:

computed: {
    config() {
        obj = {
                altFormat: 'M j, Y',
                altInput: true,
                dateFormat: 'Y-m-d',
                altInputClass: 'form-control',
              }
        if (this.form.errors.has('captured_at')) {
            // add the is-invalid property here
            obj.isInvalid = false; // or whatever value you want
        }
        return obj;
    }
👤fh0592x

0👍

I do want to post my solution on how to change input field class with Vue, when using flatPickr component. It was trickey, I probably don’t have the cleanest version yet, but is works what I want it to do.

new Vue({
    el: '#app',

    components: {flatPickr},

    data:{
        fp: null,
        properties: {},
        newRecord: null,
        action: 'post',
        id: null,
        form: new Form({
            count: '',
            property_id: '',
            captured_at: '',
            company_id: ''
        })
    },

    computed: {
        config() {
            let obj = {
                altFormat: 'M j, Y',
                altInput: true,
                dateFormat: 'Y-m-d',
                altInputClass: 'form-control is-invalid',
                onChange: () => {
                    if(this.fp){
                        this.fp.altInput.classList.remove("is-invalid");
                    }
                }
            };

            if (this.form.errors.has('captured_at')) {
                this.fp.altInput.classList.add("is-invalid");
            }else{
                if(this.fp){
                    this.fp.altInput.classList.remove("is-invalid");
                }
            }
            return obj;
        }
    },

    methods: {

    },

    mounted () {
        //this.fp = this.$refs.capture_date.fp;
        this.fp = this.$refs.capture_date.fp;
        console.log(this.fp);
    }

});
👤Guntar

Leave a comment