element Vue js does not work

-2

The view does not recognize the <Meta> </Meta> element, it does not show the table or the elements declared in meta.vue

This is my view

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading">Lista</div>

                <div id="app">
                    <Meta></Meta>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

when running the project shows nothing (meta.vue is)

<template>
    <div>

        <div class="panel panel-default">
            <div class="panel-heading">Lista de Metas</div>
            <div class="panel-body">
                <table class="table table-bordered table-striped">
                    <thead>
                    <tr>
                        <th>Id</th>
                        <th>Sub meta</th>
                        <th>Descripción</th>
                        <th>Año</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="meta in metas" :key="meta.key">
                        <td>{{ meta.META_intId }}</td>
                        <td>{{ meta.META_varSubmeta }}</td>
                        <td>{{ meta.META_varDescripcion }}</td>
                        <td>{{ meta.META_intYear }}</td>                       
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                metas: []
            };
        },
        created(){
            this.fetchMeta();
        },
        methods:{
            fetchMeta(){
                axios.get('/meta').then(respon=>{
                    this.metas=respon.data.data
                });
            }
        }
    }

</script>

and the app.js is:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('meta',require('./components/meta.vue'));

const app=new Vue({
    el:'#app'
});
    
asked by hans 19.03.2018 в 16:15
source

1 answer

3

The problem was with <Meta></Meta> , html did not recognize it so I had to change it by <Smeta></Smeta> , change the name of the component Vue.component('smeta',require('./components/meta.vue')); in app.js, Meta is a keyword reserved in HTML.

    
answered by 19.03.2018 / 17:12
source