Vue 模型数据属性可以等于另一个 Vue 数据属性对象返回的值吗？答案

【问题标题】：Can Vue model data property be equal to value that is returned by another Vue data property object?Vue 模型数据属性可以等于另一个 Vue 数据属性对象返回的值吗？
【发布时间】：2020-02-14 13:13:59
【问题描述】：

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

这里是 html 表单中的 flatPickr 组件，下面也是一个 span，显示通过 ajax 返回的错误消息。我想要实现的是，如果服务器返回错误，我想在 flatPickr 组件生成的输入中添加一个“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>

下面是 Vue 父模型的片段。 flatPickr api 确实提供了一个选项，可以通过config 对象中的altInputClass 属性向生成的输入字段添加不同的css 类。

如果v-if="form.errors.has('captured_at')" 返回true 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: ''
        })
    },

我按照 Laracasts Vue2 教程的教程创建了 errors js 类：https://laracasts.com/series/learn-vue-2-step-by-step/episodes/20

【问题讨论】：

标签： javascript html ajax vue.js vuejs2

【解决方案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;
    }

【讨论】：

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

【解决方案2】：

我确实想发布我的解决方案，说明如何在使用 flatPickr 组件时使用 Vue 更改 input 字段类。这很棘手，我可能还没有最干净的版本，但它可以满足我的要求。

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

});

【讨论】：