vue-october-requests

OctoberCMS data attribute API for vuejs

Simple implementation data attribute api for vuejs.

Usage

import axios from "axios";
import OctoberApi from "vue-october-requests";
 
Vue.use(OctoberApi, { axios });

1. using form element

<template>
  <form
    v-october:request.prevent="{
      handler: 'onSignin',
      onLoading: onLoading,
      onError: onError,
      onSuccess: onSuccess,
      redirect: '/'
    }"
  >
    <text-input
      v-model="login"
      label="Email"
      name="login"
      placeholder="Enter your email"
    />
 
    <text-input
      v-model="password"
      label="Password"
      name="password"
      placeholder="Choose a password"
      type="password"
    />
 
    <button :disabled="errors.any()" type="submit">Login</button>
  </form>
</template>
 
<script>
import TextInput from "./components/TextInput.vue";
 
export default {
  components: {
    TextInput
  },
  data() {
    return {
      login: null,
      password: null
    };
  },
  methods: {
    onLoading(success) {
      if (process.env.NODE_ENV !== "production") {
        console.log("[Login] loading", success);
      }
    },
    onError(data) {
      if (process.env.NODE_ENV !== "production") {
        console.log("[Login] error", data);
      }
 
      this.errors.add("password", "Wrong credentials.");
    },
    onSuccess(data) {
      if (process.env.NODE_ENV !== "production") {
        console.log("[Login] success", data);
      }
    }
  }
};
</script>

1. using javascript function

new Vue({
  el: "#v-app",
  methods: {
    onSubmit(input: string) {
      const formData = new FormData();
 
      formData.append("input", input);
 
      this.$october.request("onSubmit", {
        formData
        // onLoading: onLoading,
        // onError: onError,
        // onSuccess: onSuccess,
        // redirect: "/"
      });
    }
  }
});