Javascript Vue模型数据属性能否等于另一个Vue数据属性对象返回的值？

在我的html表单中，我使用FlatPicker（日历选择器）组件在表单上生成输入字段。我试图弄清楚，如果error类函数返回true，如何动态更改输入字段类

下面是html表单中的FlatPicker组件，下面是一个显示通过ajax返回的错误消息的范围。我想实现的是，如果服务器返回错误，我想在FlatPicker组件生成的输入中添加一个“is invalid”类

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

---

我通过以下教程创建了

errors

js类Laracasts Vue2教程：

使用

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

---

我确实想发布我的解决方案，说明在使用flatPickr组件时如何使用Vue更改

输入

字段类。这是trickey，我可能还没有最干净的版本，但这是我想要它做的

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

});

---

工作很有魅力，谢谢你@glitch！我只是在学习Vue，在这一点上，我不会想到这一点。

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

});