Question

我用Rails 6，webpacker和VueJs创建了一个全新的应用程序。 Vue，vue-sweetalert和vue-loader工作正常。当我尝试使用Vue Component从Rails.ajax向Rails控制器发送ajax请求时，发生此错误。

这是我的 application.js ，我在其中初始化rails_ujs和其他全局内容

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 }
  })
})

Plans.vue（Vue组件）

<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>

<style scoped>
</style>

我尝试调用subscribePlan的{{1}}函数中的错误提示。我正在Rails.ajax中渲染此组件，并从那里传递道具

plans / index.html.erb

plans/index.html.erb

我无法找到我在这里想念的东西。我已经用Google搜索了它，但是找不到Vue的Rails 6的任何支持/帮助。

Answer 1

您需要import要从Vue组件中访问的任何模块。因此，对于Rails内的Plan.vue：

<script>
import Rails from 'rails/ujs';

//...

Answer 2

在SELECT ((1,2),CAST(NULL AS INT)) = ((1,CAST(NULL AS INT)),1)内的CAST(NULL AS INT)中，添加下一行Plans.vue

在没有“ {rails / ujs”之前，<script>对我来说是行不通的

Rails 6+ webpacker + VueJs：[Vue警告]：v-on处理程序中的错误：“ ReferenceError：未定义Rails”

2 个答案: