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

Question

in my html form I am using flatPickr (calendar picker) component that generates input field on the form. I am trying to figure out how do I change the input field class dynamically if the error class function returns true.

Here is the flatPickr component in the html form, below which is also an span that displays error message that came back via ajax. What I would like to achieve is, if there is an error that came back from server, I would like to add a "is-invalid" class to the input generated by flatPickr component.

<flat-pickr v-model="form.captured_at" :config="config"
            placeholder="Select date"
            name="captured_at" :required="true"
></flat-pickr>
<span class="text-danger" v-if="form.errors.has('captured_at')" v-text="form.errors.get('captured_at')"></span>

Below is a fragment of the Vue parent model. The flatPickr api does provide an option to add a different css class to the generated input field through altInputClass property in config object.

How do I connect the "dots" where if the v-if="form.errors.has('captured_at')" returns true a is-invalid css class is added to config.altInputClass property?

new Vue({
    el: '#app',

    components: {flatPickr, GopherTable},

    data:{
        properties: {},
        newRecord: null,
        action: 'post',
        id: null,
        config: {
            altFormat: 'M j, Y',
            altInput: true,
            dateFormat: 'Y-m-d',
            altInputClass: 'form-control',
        },
        form: new Form({
            count: '',
            property_id: '',
            captured_at: '',
            company_id: ''
        })
    },

I created the errors js class by following tutorial the Laracasts Vue2 tutorial: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20

Answer 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;
    }

Answer 2

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);
    }

});