Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/google-cloud-platform/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Vue.js 在data()函数中使用Vue实例_Vue.js - Fatal编程技术网

Vue.js 在data()函数中使用Vue实例

Vue.js 在data()函数中使用Vue实例,vue.js,Vue.js,首先,我知道这不是最好的做法,也不推荐,但确实有一些罕见的情况下,它可能是有用的。例如,我使用一个外部js库来显示JSON内容,组件似乎接受一个options属性。在这个属性中,我可以使用两个回调函数来验证JSON内容 以下是实施方案: <v-jsoneditor ref="editor" v-bind:plus="true" v-bind:options="options" height="500px"

首先,我知道这不是最好的做法,也不推荐,但确实有一些罕见的情况下,它可能是有用的。例如,我使用一个外部js库来显示JSON内容,组件似乎接受一个
options
属性。在这个属性中,我可以使用两个回调函数来验证JSON内容

以下是实施方案:

<v-jsoneditor ref="editor"
              v-bind:plus="true"
              v-bind:options="options"
              height="500px"
              v-model="value"
              v-on:error="onError">

</v-jsoneditor>
我知道我可以使用如下创建方法,并在vue实例上使用closure:

async created() {
    let vue = this;
    this.options.onValidate = function (value) {
        if (vue.isRequired) {
            console.log("required");
        }
        console.log(value);
        return null;
    }
    await this.loadRules();
}
但我希望有更好的方法来实现它,因为如果我继续添加越来越多的回调函数,create方法看起来会非常复杂

在data()函数中是否有更好的方法访问当前Vue实例?
我正在使用的库就是其中之一。

似乎比我想象的要简单得多,完全忘记了将data()更改为使用数组函数表示法,如下所示:

data: (vue) => ({
    value: "",
    state: null,
    errorMessage: "",
    showRulesModal: false,
    rules: [],
    options: {
        mode: 'code',
        onValidate(json) {
            let errors = [];
            if (Object.keys(json).length === 0 && vue.isRequired) {
                vue.$emit("on-value-validation-failed");
                errors.push({
                    path: [''],
                    message: 'Value is required to continue'
                })
                return errors;
            }
            return null;
        }
    }
}),

感谢@antoy为我指明了正确的方向:)

似乎比我想象的要容易得多,完全忘记了将data()更改为使用数组函数表示法,如下所示:

data: (vue) => ({
    value: "",
    state: null,
    errorMessage: "",
    showRulesModal: false,
    rules: [],
    options: {
        mode: 'code',
        onValidate(json) {
            let errors = [];
            if (Object.keys(json).length === 0 && vue.isRequired) {
                vue.$emit("on-value-validation-failed");
                errors.push({
                    path: [''],
                    message: 'Value is required to continue'
                })
                return errors;
            }
            return null;
        }
    }
}),

感谢@Antoy为我指明了正确的方向:)

您可以使用箭头函数简化函数声明您可以使用箭头函数简化函数声明