我的问题很简单,如何让Ruby on Rails应用程序与Vue协同工作.js?

The details

我首先看一下vue-rails gem,但这会将Vue添加到railsassets资源 管道中,我想使用其他npm包,比如browserify.然后我看一下,browserify-rails在js文件夹app/assets/javascript/中启用commonjs.此外,我还计划 for each rails控制器制作一个Vuejs应用程序,并使用vue-resourcevue-router访问后端操作(如果这不是一个好方法,请告诉我),因此我在布局中添加了以下内容

<%= javascript_include_tag params[:controller] %>

这将添加一个带有控制器名称的js文件,因此UsersController将包含该控制器的主vue应用程序的users.js文件.

然后,为了try 这一点,我用rails构建了一个用户资源,并使其在每个操作中呈现json格式,如下所示

def index
    @users = User.all

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @users }
    end
end

这很有效.然后在app/assets/javascript/文件夹中添加用户.js提供了以下内容

var Vue = require('vue');
Vue.use(require('vue-resource'));

new Vue({
    ready: function(){
        this.$http.get('users.json').then(function(response){
            console.log(JSON.stringify(response));
        });
    }
});

当我在chrome中判断开发控制台时,我看到添加了Vue,但没有看到任何响应,我已经插入了一个用户.顺便说一句,我正在try 使用https://vuejs-rails-yerkopalma.c9users.io/users url(我在c9.io中开发),只呈现/users/index.html.erb文件.那么,我的猜测是:

  1. 我可能用错了vue-resource,我指的是传递给get()函数的url.
  2. 我可能错过了大约vue-resource个配置.
  3. 也许我应该用vue-rails颗Ruby 加上brwoserify-rails颗,但我不知道怎么用.任何帮助或指导都将不胜感激.

这是我的application.js文件(也包括在我的布局文件中)

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets

推荐答案

我用Vue成功地做到了这一点.js.

首先,我在传递给Vue构造函数的对象中添加了一个el属性,然后我开始收到一个错误,说没有定义body元素.显然,body元素总是存在于html文件中,所以我认为创建Vue实例时存在问题.所以我就简单地把所有的事情都写进了一个ready事件.

$(document).on('ready page:change', function() {
    var Vue = require('vue');

    Vue.use(require('vue-resource'));       

    new Vue({
        el: 'body',
        data: {
            users: []
        },
        ready: function(){
            this.$http.get('users.json').then(function(response){

                console.log(JSON.stringify(response.data));
                this.users = response.data;
            }, function(response){
                console.log("fail");
                console.log(JSON.stringify(response));
            });                
        }
    });        
});

这很好!

因为我使用的是TurboLink,所以我还包括了page:change event个.在我看来,我可以访问Vue实例.所以这使得这个 case 有效,对于这个特定的问题也没问题,但是我现在在处理.vue个组件时遇到了另一个问题,也许我会提出另一个问题.

请注意,在我的index.html.erb视图中,我可以访问assets/javascript/文件夹中users.js文件中定义的Vue实例,但那是I have not access to Vue or any of the js modules loaded with browserify from the views folder

Vue.js相关问答推荐

将 html 文件移出 dist vite 中的 src 文件夹

Vuex Mutations 和 Airbnb eslint

如何使用 vue.js 和 vue 路由实现当前路由的子菜单的子菜单

为什么Vue.js 使用单字标签

CLI 3 - 如何为 CSS/Sass 创建vendor bundle ?

在基于 TypeScript 的 Vue 中将 vuex 状态和Mutations绑定到复选框组件属性

vuejs中通过变量动态调用方法

vue-router的router-link实际刷新?

Vue-test-utils:在单个测试中多次使用 $nextTick

Laravel Blade 模板将数据传递给 Vue JS 组件

Modal 内部的 Vue.js AJAX 调用

我可以修改 Vue.js VNodes 吗?

有没有办法知道组件实例何时挂载?

加载时焦点文本框上的 Vue.js

执行调度程序刷新期间未处理的错误,这可能是一个 Vue 内部错误

从 ajax 调用填充 Vue.js 中的下拉列表

使用 Vue 在单个文件组件中调用渲染方法

标签中的 href 赋值

如何在 vuejs 中的基于类的组件中编写计算设置器

如何删除 vue cli 2?