chrisgrim
6 days ago
73
2
Vue

Understanding const inside and outside of vue component

Posted 6 days 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

<template>
    <div>
        <div class="create-guide-title">
        <h2> What is the Title of your Event?</h2>
        </div>
        <div>
            <p>Make it a good one!</p>
        </div>
        <div class="floating-form">
            
            <div class="create-field">
                
                <label>Title</label>
                <input 
                type="text" 
                class="create-input"
                v-model="Title" 
                placeholder=" "
                @input="$v.Title.$touch()"
                 />

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

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

<script>
    
    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: {

            hasServerError(field)
            {
                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
                    console.log(response);
                })
                .catch(error => {
                    console.log(error.response.data.errors);
                    this.errors = error.response.data.errors;

                });
            }
        },

        validations: {
            Title: {
                required,
                TomValidator,
                titleTaken
            },
        },
    };

</script>

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.