Can you pass an array to a vue component?

Question

Can you pass an array to a vue component?

Navigation

#1 by (1 votes)

0

I have a question.

In a certain view of laravel I load certain data which through my controller I pass them with (Compact) and they are later loaded and I show them with my foreach. but I do not know if there is any way to pass that array to my vue component

In fact I could have implemented it with an APi that loads my list of products as an example, but I have a question about my Api. Well, it turns out to be something insecure and I do not know how I can do so that nobody else makes requests (I mean only the requests come from the same page) and that I can not see the list if I directly access my Apirest eg. www.example.com/listProducts

My controller only has it this way eg something short.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Producto;
class Ideacontroller extends Controller
{
    
      public function __construct()
    {
        $this->middleware('auth');
    }

    public function getProductos()
    {

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

}

laravel vue.js component

asked by Alex Burke Cooper 18.05.2018 в 02:37

source

1 answer

Convert from double to BigDecimal in Java Multiplication of Matrices in C

score 1 · Accepted Answer

A simple example of how you can obtain any information you need in your components, through Axios making calls to your API or any API.

<template>
    <li v-for="user in users" >
        {{user.firstName}}
    </li>

</template>

<script>
import $axios from 'axios'   
const BASE_URL='http://localhost:5000/api'

        
export default {
   data(){
    return{
      users:[]
    }
   }
   async getUsers(){
      const URL = '${BASE_URL}/users'
       try{
          const response=await $axios.get(URL).then(res=>res.data)           
          this.users=response             
       }catch(e){
            //do somenthing with errors
          console.error(e)
       } 
    
        
   }

}

</script>