Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

JuanDBB's avatar

Trying a Spark form

Hello,

I'm trying to make a sample Spark form in order to know how it works. For example, I have:

<comment :user="user">

                <form class="form-horizontal" role="form">
                    <div class="form-group" :class="{'has-error': form.errors.has('body')}">
                        <label class="col-md-4 control-label">Body</label>

                        <div class="col-md-6">
                            <textarea class="form-control" name="body" v-model="form.body"></textarea>

                            <span class="help-block" v-show="form.errors.has('body')">
                                @{{ form.errors.get('body') }}
                            </span>
                        </div>
                    </div>

                    <button class="boton boton-primary" @click="register" :disabled="form.busy">
                        Add a comment
                    </button>
                </form>

                <div class="alert alert-success" v-if="form.successful">
                    Your contact information has been updated!
                </div>

        </comment>

and the vue component:

Vue.component('comment', {
    props: ['user', 'body'],
    data() {
        return {
            form: new SparkForm({
                body: ''
            })
        };
    },
    mounted() {
        console.log(Spark.state.user);
    },
    methods: {
        register() {
            Spark.post('/comments', this.form)
                .then(response => {
                console.log(response);
        });
        }
    }
});

But it gives me errors like Property or method "form" is not defined on the instance but referenced during render, or Cannot read property 'errors' of undefined.

What I'm doing wrong?

Thank you in advance

0 likes
3 replies
vnit's avatar

I am getting same error. Any update here?

ecwebservices's avatar

It's been 3 years with one reply, and still I'm stumped here.

petervee's avatar

I had the same issue trying to import the sample TODO application from the older docs. In the end npm run dev fixed the "form not defined" issue.

Please or to participate in this conversation.