Metoer, vuetify and vue2 help with insert to collection example

VueJS
1

I’m trying to figur out meteor, vuetify and vuejs

Can anyone help tell me how to insert data to a mongodb collection from a form like this:

#2 VForm - Validation w/ submit & clear
https://vuetifyjs.com/components/forms

<template>
  <v-form v-model="valid" ref="form" lazy-validation>
    <v-text-field
      label="Name"
      v-model="name"
      :rules="nameRules"
      :counter="10"
      required
    ></v-text-field>
    <v-text-field
      label="E-mail"
      v-model="email"
      :rules="emailRules"
      required
    ></v-text-field>
    <v-select
      label="Item"
      v-model="select"
      :items="items"
      :rules="[v => !!v || 'Item is required']"
      required
    ></v-select>
    <v-checkbox
      label="Do you agree?"
      v-model="checkbox"
      :rules="[v => !!v || 'You must agree to continue!']"
      required
    ></v-checkbox>

    <v-btn
      @click="submit"
      :disabled="!valid"
    >
      submit
    </v-btn>
    <v-btn @click="clear">clear</v-btn>
  </v-form>
</template>

js

<script>
  export default {
    data: () => ({
      valid: true,
      name: '',
      nameRules: [
        (v) => !!v || 'Name is required',
        (v) => v && v.length <= 10 || 'Name must be less than 10 characters'
      ],
      email: '',
      emailRules: [
        (v) => !!v || 'E-mail is required',
        (v) => /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(v) || 'E-mail must be valid'
      ],
      select: null,
      items: [
        'Item 1',
        'Item 2',
        'Item 3',
        'Item 4'
      ],
      checkbox: false
    }),
    methods: {
      submit () {
        if (this.$refs.form.validate()) {
          // Native form submission is not yet supported
          axios.post('/api/submit', {
            name: this.name,
            email: this.email,
            select: this.select,
            checkbox: this.checkbox
          })
        }
      },
      clear () {
        this.$refs.form.reset()
      }
    }
  }
</script>

I need to figur it out this week else I have to to back to blaze and mdl

2

It’s really the same as you’d do in a Blaze event handler. Just call a Meteor method or insert it directly.

methods:{
  submit(){
    if(this.$refs.form.validate()){
      Meteor.call('insertStuff', {name:this.name, email:this.email})
      //or
      Things.insert({name:this.name, email:this.email})
    }
  }
}
1 Like
3

I have just tried but I get this error:

[Vue warn]: Error in event handler for "click": "ReferenceError: Events is not defined"

found in

---> <VBtn>

I have this in server main.js:

Meteor.startup(() => {
  // code to run on server at startup
  Events = new Mongo.Collection('events');
});

What else do i need?