My goal is to make an AJAX call to a Rails Controller in order to retrieve some data and then display it using Vue.js. However, for some reason, the request doesn't seem to be reaching the Controller. Can you help me figure out what I am doing wrong? Without the AJAX call, Vue.js works perfectly fine.
app/assets/javascript/calculator.js
var calculator = new Vue({
el: '.container',
data: {
numbers: []
},
ready: function() {
var that;
that = this;
$.ajax({
url: '/calculator.json',
success: function(response) {
that.numbers = response;
}
});
}
});
app/controllers/calculator_controller.rb
class CalculatorController < ApplicationController
def index
@numbers = [1,2,3,4,5]
respond_to do |format|
format.html
format.json { render json: @numbers }
end
end
end
app/views/calculator/index.html.haml
.container
.row
.col-lg-12
%ul
%li{ "v-for": "number in numbers" }
{{ number }}