Não exibe o conteúdo do componente

Aurélio Oliveira Criador 12/02/2019
Aurélio Oliveira

Segui passo a passo porém o conteudo não é exibido. Se eu utilizo o componente de exemplo funciona desde que eu não altere o conteúdo do compomente, caso alterado não exibe a alteração.  Registrei o componete como oritentedo assim: Vue.component('users-component', require('./components/chat/Users'));

Tentei compilar novamente e também não funcionou.  Outra tentativa foi iniciar outro projeto do zero e também não funcionou.

Manager Carlos Ferreira 12/02/2019
Carlos Ferreira

Olá, Aurélio!
Tudo bem?

Define este component como default, assim:
Vue.component('users-component', require('./components/chat/Users')).default();

No aguardo.

Criador Aurélio Oliveira 13/02/2019
Aurélio Oliveira

Bom dia Carlos,

 

continua sem exibir o conteúdo.

Vejo o erro no console:

 

app.js:48698 Uncaught TypeError: Vue.component(...).default is not a function

    at Object../resources/js/app.js (app.js:48698)

    at __webpack_require__ (app.js:20)

    at Object.0 (app.js:48894)

    at __webpack_require__ (app.js:20)

    at app.js:84

    at app.js:87

Manager Carlos Ferreira 13/02/2019
Carlos Ferreira

Desculpas era .default, e não .default()

Mas, também pode importar o component assim:
import Users from './components/chat/Users'

E registre na instância do Vue.js:
const app = new Vue({
    el: '#app',
    components: {
        Users,
    }
});

Criador Aurélio Oliveira 15/02/2019
Aurélio Oliveira

Bom dia Carlos obrigado pela atenção.... fiz novamente tudo do zero e importei assim:  Vue.component('users-component', require('./components/chat/Users').default);   então deu tudo certo.

 

Reparei que minha estrutura de pastas esta assim:   resouces/js/components...    ou seja não tem a pasta assets como tem ai no seu projeto, tem algum problema ficar sem essa pasta?

Manager Carlos Ferreira 15/02/2019
Carlos Ferreira

Olá, Aurélio!

Que bom que deu certo amigo. \o/

A partir da versão 5.7 do Laravel o diretório assets/ foi removido. Mas, não se preocupe, isso não altera em nada o funcionamento do Vue.js dentro do Laravel.

Criador Aurélio Oliveira 14/03/2019
Aurélio Oliveira

Bom dia Carlos,

 

Continuando os estudos resolvi implementar o VueJs em uma aplicação que tenho. Para isso criei um component na pasta components com o nome de ContagemComponent.vue.

Em seguida fiz o registro no app.js assim:

Vue.component('contagem-component', require('./components/ContagemComponent.vue').default)

 

const app = new Vue({

    el: '#app',

    components:{

        ContagemComponent,

    }

});

 

e ao chamar esse component na view não monstra o conteudo do componente e tenho o erro no console:

app.js:37063 [Vue warn]: Unknown custom element: <contagem-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

(found in <Root>)

You are running Vue in development mode.

Make sure to turn on production mode when deploying for production.

See more tips at https://vuejs.org/guide/deployment.html

 

Outra questão é que o componente de exemplo é exibido normalmente, mas se eu altero o texto do componente de exemplo, o mesmo não é atualizado na view.

Qual é o jeito certo de fazer esse registro? 

Manager Carlos Ferreira 14/03/2019
Carlos Ferreira

Olá, Aurélio!

Certo. Preciso fazer algumas perguntas para identificar onde está o erro e te ajudar a resolver, ok?

Primeiro, preciso ver o conteúdo do component ContagemComponent (pode postar aqui ou no GitHub: https://pastebin.com/).

Quando compilou os assets, gerou algum erro? Se sim, qual?

Na sua view, tem o id="app" em uma div que envolve todo o conteúdo?

No aguardo.

Criador Aurélio Oliveira 15/03/2019
Aurélio Oliveira

Bom dia Carlos,

Como estou iniciando criei o component de form bem simples só pra ver se esta dando certo, como na aula:

<template>

    <div>

        #Contador...

    </div>   

</template>

 

Sempre que salvo o component ou a app.js é compilado com sucesso "Laravel Mix Build successful"

 

So a o id="app" estou usando o layout padrão do lararel @extends('layouts.app') que já envolto pela div id="app" correto?

 

Só uma observação é a minha estrutura de pasta esta assim:  resouces/js/components   ou seja não tema a assets, mas já sei que isso não causa problemas.

 

Manager Carlos Ferreira 15/03/2019
Carlos Ferreira

Olá, Aurélio!

Deixando o componente simples como fez, e compilando pelo Mix, deu certo?

Sobe esse projeto para o GitHub, e me envia para que eu possa te ajudar (veja como subir apps Laravel para o GitHub: https://academy.especializati.com.br/aula/versionar-projeto-laravel-subir-github).

Criador Aurélio Oliveira 16/03/2019
Aurélio Oliveira

Ola Carlos, mais uma vez obrigado pela ajuda.

https://github.com/AurelioOliver/PortalTiSite

 

Manager Carlos Ferreira 18/03/2019
Carlos Ferreira

Assim deu certo (no arquivo app.js):
import ContagemComponent from './components/ContagemComponent';

const app = new Vue({
    el: '#app',
    components: {
        ContagemComponent,
    }
});

Sabe a Solução? Ajude a resolver!

Precisa estar logado para conseguir responder a este ticket!

Clique Aqui Para Entrar!