10 months ago

Understanding const inside and outside of vue component

Posted 10 months ago by chrisgrim

Hi, I am struggling to understand some of the Vue basics, I am learning JS after learning php. I am setting up server validation with vuelidate and running into an issue. I have followed some tutorials online to understand custom validation and I am struggling to get those to work for what I need. I have setup this component file

        <div class="create-guide-title">
        <h2> What is the Title of your Event?</h2>
            <p>Make it a good one!</p>
        <div class="floating-form">
            <div class="create-field">
                placeholder=" "

                 <div v-if="$v.Title.$error" class="validation-error">
                        <p class="error" v-if="!$v.Title.required">The Street Address is required</p>
                        <p class="error" v-if="!$v.Title.TomValidator">Name does not say Tom</p>

        <div class="">
            <button @click.prevent="submitTitle()" class="create"> Next </button>

    import { required, minLength } from 'vuelidate/lib/validators';
    import _ from 'lodash';

    const TomValidator = (value, component) => { return value === 'post'; }

    export default {
        props: {
            event: { type:Object },

        data() {
            return {
                Title: this.event.eventTitle,
                eventUrl:_.has(this.event, 'slug') ? `/create-event/${this.event.slug}` : null,
                errors: [],

        methods: {

                return 'test';

            status(validation) {
              return {
                error: validation.$error,
                dirty: validation.$dirty

            async submitTitle() {

                let data = {};
                data.title = this.Title;

                axios.patch(`${this.eventUrl}/title`, data)
                .then(response => {
                // all is well. move on to the next page
                .catch(error => {
                    this.errors =;


        validations: {
            Title: {


The custom Tom validation works and unless they write the name Tom in it will catch. I'm hoping to set it up so that if I get a server error ie title:The title has already been taken. I can add that to the data: errors and check that.

I am having trouble understanding

const TomValidator = (value, component) => { return value === 'post'; }

as it is outside my exported default and I can't figure out how to reference the data.

const titleTaken = (value, component) => {How do I access my returned data}

Please sign in or create an account to participate in this conversation.