Problem when passing data from a Laravel driver to a view with Vue

Question

Problem when passing data from a Laravel driver to a view with Vue

Navigation

#1 by (1 votes)

-1

I'm passing some data from a controller in the index method:

public function index() {
    $variable = Modelo::orderBy('id', 'DESC')->get();
    return view('vista', compact('variable'));
}

and I am receiving them in this view:

<tbody>
    <tr v-for="value in values">
        <td>@{{ value.id }}</td>
        <td>@{{ value.name }}</td>
    </tr>
</tbody>

And the vue code is as follows:

new Vue({
    el: '#app',
    data: {
        values: []
    },
    created: function() {
        this.getVaues()
    },
    methods: {
        getValues: function() {
            var url= 'uri';
            axios.get(url).then(response => {
                this.values = response.data
            });
        }
    }
});

The problem is that the data that is stored in the list "values" of the Vue code is a html mark, but if from the controller I only return the data (without the view) like this:

return Modelo::orderBy('id', 'DESC')->get();

I confirm that evidently if it brings me the data of the BD, but I do not know how to see them.

This is what is stored in the "values" list of the Vue code and a JSON should be saved with the data obtained from the BD with the controller.

php laravel laravel-5 vue.js

asked by Roman González 13.02.2018 в 23:59

source

1 answer

Access the methods of a table and its variables Error because the User table already "exists"

score 1 · Accepted Answer

If you want to show some variables with Vue, you must then return a JSON from Laravel, which is usually done automatically with Eloquent:

public function index()
{
    return Modelo::select('id', 'name')
                   ->orderBy('id', 'desc')
                   ->get();
}

In case that for some reason it does not generate the JSON, you can use the ->toJson()

method

The code you currently have should work on Vue.