Hasan Ali

I have created the brand new application in rails 6 with webpacker and VueJS. I am trying to use the Rails.ajax to send ajax request request from Vue component to rails controller. I have included other js plugins these are working fine. But when I am trying to send ajax request with Rails.ajax it throws this error in chrom console. [Vue warn]: Error in v-on handler: “ReferenceError: Rails is not defined”

Here is my application.js Code:

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")

import Vue from 'vue/dist/vue.esm'
import VueSweetalert2 from 'vue-sweetalert2';

import 'vue-loading-overlay/dist/vue-loading.css';
import 'sweetalert2/dist/sweetalert2.min.css';

import Plans from '../plans.vue'

Vue.use(VueSweetalert2);

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#vue-container',
    components: { Plans }
  })
})

I am rendering Vue Component in plans/index.html.erb Like @chris is doing rails Rails 5 trello clone with vue JS. Here is Vue component.

<template>
  <div class="container">
    <div class="row">
      <div class="plan_section">
        <div class="plan_heading_section">
          <h1>Plan / Pricing </h1>
          <p>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...</p>
        </div>
        <div class="bs-five-area bs-radius">
          <Loading :active.sync="isLoading"
          :is-full-page="false"
          :height="40"
          :width="40"
          :color="color">
          </Loading>
          <div v-for='plan in plans' v-bind:key="plan.id" class="col-md-4 no-padding" v-bind:class="activePlanClass(plan, shop)">
            <div class="bs-five">
              <h3 class="text-uppercase">Plan</h3>
              <h1 class="bs-caption"><sup>$</sup>{{ plan.price }}</h1>
              <ul>
                <li><b>{{ planDescription(plan) }}</b></li>
              </ul>
              <button class="btn btn-success subscribe-plan btn-round m-top-40" @click="subscribePlan" :disabled="isDisabled(plan, shop)">{{ planButtonText(plan, shop) }}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Loading from 'vue-loading-overlay';

export default {
  name: 'Plans',
  props: ['plans', 'shop', 'url'],
  components: { Loading }, 
  data: function () {
    return {
      isLoading: false,
      color: '#3BB9FF',
    }
  },
  methods: {
    activePlanClass: function(plan, shop){
      return plan.id == shop.plan_id ? 'active-plan' : ''
    },
    planDescription: function(plan){
      name = ''
      switch(plan.plan_type) {
        case 0:
          name = "One Fan Page"
          break;
        case 1:
          name = "Two Fan Pages"
        case 2:
          name = "Four Fan Pages"
        case 3:
          name = "Eight Fan Pages"
        case 4:
          name = "Unlimited"
          break;
      }
      return name;
    },
    planButtonText: function(plan, shop){
      return plan.id == shop.plan_id ? 'Subscribed Plan' : 'Subscribe'
    },
    isDisabled: function(plan, shop){
      if (plan.id == shop.plan_id || plan.id < parseInt(shop.plan_id)) { return true; }
      return false;
    },
    subscribePlan: function(event){
      this.isLoading = true;
      debugger;
      Rails.ajax({
        url: this.url,
        type: 'get',
        dataType: 'json',
        success: function (data) {
          if (data.success) {
            if (data.message) { toastr.success(data.message) }
            window.location.href = data.url
          }
          else {
            removeIcon(clicked_ele)
            toastr.error(data.message)
          }
        },
        error: function(){
          removeIcon(clicked_ele)
          toastr.error('Server Error, Please contact with support team.');
        }
      })
    }
  }
}
</script>

Error occurs in subscribePlan function where Rails.ajax is defined. Couldn;t find anything on google. I have posted question on stackoverflow https://stackoverflow.com/questions/57842312/rails-6-webpacker-vuejs-vue-warn-error-in-v-on-handler-referenceerror-r as well but didn't get any help. I am unable to find what I am missing here. Anyone will be appricated thanks