Может ли свойство данных модели Vue быть равно значению, которое возвращается другим объектом свойства данных Vue?

Question

в моей html-форме я использую компонент flatPickr (средство выбора календаря), который генерирует поле ввода в форме. Я пытаюсь выяснить, как мне динамически изменить класс поля ввода, если функция класса ошибки возвращает значение true.

Здесь представлен компонент flatPickr в форме html, ниже которого также находится диапазон, отображающий сообщение об ошибке, котороевернулся через AJAX. Чего я хотел бы добиться, так это того, если с сервера возникла ошибка, я хотел бы добавить класс «is is invalid» к входным данным, сгенерированным компонентом flatPickr.

<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>

Ниже приведенофрагмент родительской модели Vue. API-интерфейс flatPickr предоставляет возможность добавить другой класс css в сгенерированное поле ввода через свойство altInputClass в объекте config.

Как мне соединить «точки», если v-if="form.errors.has('captured_at')" возвращает true a is-invalid класс css добавляется в свойство config.altInputClass?

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: ''
        })
    },

Я создал класс errors js, следуя инструкциям руководства Laracasts Vue2: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20

Answer 1

Используйте свойство computed, например:

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

Я хочу опубликовать свое решение о том, как изменить класс поля input с помощью Vue при использовании компонента flatPickr. Это была хитрость, у меня, вероятно, еще нет самой чистой версии, но она работает так, как я хочу.

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

});