小编Yer*_*lma的帖子

我不懂.我几个小时以来一直在努力

我在Laravel中使用Vue.js并尝试向外部API发出POST请求.

但我总是在我的Vue POST请求上收到CORS错误

methods: {
            chargeCustomer(){
                this.$http.post('/api/chargeCustomer', this.payment).then(function (response) {
                    console.log(response.data)
                },function (response) {
                    console.log(response.data)
                });
            }
        }

错误

MLHttpRequest无法加载 https://www.mollie.com/payscreen/select-method/JucpqJQses.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此,不允许访问" https://payment.dev ".

我为我的后端安装了Laravel CORS包,并将中间件添加到我的路线中,例如

Route::group(['middleware' => 'cors'], function(){
    Route::post('/api/chargeCustomer', 'Backend\PaymentController@chargeCustomer');
});

但我仍然得到错误.我还尝试添加Vue Headers

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*';
Vue.http.headers.common['Access-Control-Request-Method'] = '*';

具有相同的结果/错误.

有人能告诉我我做错了什么吗？

好吧,我的问题很简单,如何让Ruby on Rails应用程序与Vue.js一起使用？

细节

我首先看一下vue-railsgem,但是将Vue添加到rails资产管道中,我想使用其他npm包,比如browserify.然后我期待那个,browserify-rails在js文件夹中启用commonjs app/assets/javascript/.我也正打算让每一个轨道控制器Vuejs的应用程序,并获得与后端的行动vue-resource和vue-router(如果这不是一个好办法,请让我知道),所以我加了下面一行到我的布局

<%= javascript_include_tag params[:controller] %>

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

然后,为了尝试这个,我使用rails搭建了一个Users资源,并使其在每个动作中呈现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/文件夹中添加具有以下内容的users.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中检查dev控制台时,我看到Vue已添加,但我没有看到任何响应,并且我已经插入了一个用户.顺便说一句,我正在尝试使用https://vuejs-rails-yerkopalma.c9users.io/usersurl(我正在使用c9.io进行开发)并且只/users/index.html.erb渲染文件.所以,我的猜测是:

1. 我可能以vue-resource错误的方式使用,我的意思是传递给get()函数的url .
2. 我可能会错过一些vue-resource配置.
3. 也许我应该使用vue-rails宝石结合brwoserify-rails但我只是不知道如何.任何帮助或指南将不胜感激. …

我需要根据用户交互动态地将子组件添加到组件.我看了一些老问题,但对我来说这似乎是一个肮脏的黑客,此外,这是一个老问题,vue开发真的很活跃,所以我不知道现在是否有更好的方法.

我到目前为止所尝试的是这个小提琴,但显然不起作用,它说$mount只能调用一次.我不知道该怎么做,我的另一个选择是动态组件,但为此我还必须<component>动态添加一个元素,所以它变成了几乎相同的问题.

那么如何在客户端点击或其他客户端事件上添加组件？

我想为对象的所有方法添加一个通用的回调函数.我发现了这个问题,但在那个方法中,我将不得不修改该类的每个功能.我想定义一些beforeFilter在每个方法调用之前得到三角形的方法.我知道我可以用Action delegates它,但我不知道怎么做.

更新:作为一个例子,我想要的是这样的

Class MyClass

    Sub MyCallback
        'callback code...
    End Sub

    'Rest of tyhe code

End Class

正如您所看到的,理想情况是在所有其他方法之前添加一个简单(或多个)方法来进行三重处理.也许有一些基类或接口,我不知道(这就是我要求的原因).

我认为可能有的其他选项是克隆对象并定义一个新类,而不是将代码添加到现有类中.所以在那里Class使用Objectto来获取方法trhough Type

Class NewClass

     Sub AddCallback(Obj As Object, Callback As Action)
          'Add the callback here
     End Sub
End Class

我只是猜测,也许我的一些选择甚至是不可行的,所以请帮助我

最近的方法

我现在拥有的是这种方法

Sub RunWithCallback(beforFilter As Action, f As Action)

    beforeFilter()
    f()

End Sub

(这意味着RunWithCallback使用Actions和Funcs委托管理Sub和函数的大量重载,具有不同数量的参数)要使用它,我必须运行此Sub而不是调用任何Object方法(传递ByRef参数以捕获在函数中返回值).像这样的东西

Public Sub DoNothing()
    Debug.WriteLine("Callback working!")
End Sub

Public Sub …

首先,有 user.js,这是其中一个模块store.js

const state = {
  isLogin: false
}

const mutations = {
  login(state, userid){
    state.userid = userid;
  }
}

export default {
  state,
  mutations
}

使用Vue-router,我创建了一个App Component,然后导入store.js.
然后是组件login.vue.以下是代码的一部分:

<script>    
export default {
  vuex: {
    actions: {
        login  // this action changes the state of
               // isLogin by dispatch `login` mutation
    }
  },

  methods: {
    btnClick(){
      // here calls the login action
    }
  }
} 
</script>

我注意到该方法btnClick可以在这个组件中工作.它确实改变了store.state.user.isLogin.

但这是另一个a.vue听取 …

我用vue和建立一个应用程序vue-router.在某些路由中,我需要首先检查一些条件,如果不满足这些条件,然后重定向到另一个组件,所以我使用了我的组件选项activate上的钩子router,它工作正常.另外,在同一个组件中,我有vue created挂钩来加载一些数据,问题是如果我之前提到的那些条件不满足,那么我就无法在创建的钩子中加载数据.我期望的是,如果不满足该条件,并且调用重定向钩子,则创建的钩子不会被触发,但实际发生的是该条件为假,然后激活钩子的重定向被调用以及来自Vue的创建钩子.因此,除了我的特定用例的解决方案之外,我想知道在一起使用vue和vue路由器时钩子的执行顺序.

我相信这很简单,我错过了一些东西.我想用javascript分割windows中的物理路径.所以我尝试使用String#split函数,但我的结果是无法预料的.

对于这个字符串

"C:\CLC\VIDA\Web\_REPOSITORIO\Colectivos\ReembolsosWeb\TMP_011906169_01_01.pdf"

我得到了这个结果

var test = "C:\CLC\VIDA\Web\_REPOSITORIO\Colectivos\ReembolsosWeb\TMP_011906169_01_01.pdf";

test.split("\"); //throws error
test.split("\\"); //result in -> ["C:CLCVIDAWeb_REPOSITORIOColectivosReembolsosWebTMP_011906169_01_01.pdf"]
test.split(/\\/); // -> the regex is the same as above

最后一件事,在我的测试中,我发现要获得我想要的结果,我可以这样做

var test2 = "C:\\CLC\\VIDA\\Web\\_REPOSITORIO\\Colectivos\\ReembolsosWeb\\TMP_011906169_01_01.pdf"
test2.split("\\"); // -> ["C:", "CLC", "VIDA", "Web", "_REPOSITORIO", "Colectivos", "ReembolsosWeb", "TMP_011906169_01_01.pdf"]

所以我的问题是,如何从testvar 拆分字符串以从最后一个案例中获取数组？