All threads / How I do use Rails.ajax in vueJs components using webpacker in rails 6

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How I do use Rails.ajax in vueJs components using webpacker in rails 6

Hasan Ali asked in Rails

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

I fix this by using:

import Rails from "@rails/ujs"
Rails.start()

instead of

require("@rails/rails-ujs").start()

and then I added

import Rails from "@rails/ujs"

in every component where I use Rails

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 35,699+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.