2
respostas

Não carrega os elementos visuais após adicionar id para vue.js

Após adicionar o id para vue.js os campos do card somem.

<div th:replace="~{base :: logo}"></div>

<div class="container">
    <div th:replace="~{base :: titulo('Ofertas')}"></div>

    <div id="ofertas">

        <div class="card mb-3" v-for="pedido in pedidos">




            <div class="card-header alert alert-dark">{{pedido.nomeProduto}}</div>




            <div class="card-body">
                <div class="row">
                    <div class="col-12 col-sm-6 mb-3">

                        <div class="row">
                            <div class="col-sm-5">
                                valor: <input />
                            </div>

                            <div class="col-sm-7">
                                Data de Entrega: <input />
                            </div>
                        </div>

                        <div>Produto</div>
                        <div>
                            <a v-bind:href="pedido.urlProduto">{{pedido.nomeProduto}}</a>
                        </div>

                        <div>Descrição</div>
                        <div>
                            <textarea class="form-control">{{pedido.descricao}}</textarea>
                        </div>
                    </div>

                    <div class="col-12 col-sm-6">
                        <div>
                            <img class="img-thumbnail" v-bind:src="$produto.urlIMGProduto"
                                src=" ">
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
</div>
<script>
    function onLoad() {

        var app = new Vue(
                {
                    el : '#ofertas',
                    data : {
                        pedidos : [
                                {
                                    "id" : 4,
                                    "nomeProduto" : "Wireless Earbuds TaoTronics",
                                    "valorNegociado" : null,
                                    "dataDaEntrega" : null,
                                    "urlProduto" : "https://www.amazon.com/TaoTronics-SoundLiberty-79-Technology-Waterproof/dp/B08397W1F7/ref=gbps_img_m-9_475e_ff9c5f1b?smid=AAJVIARPZY8SB&pf_rd_p=5d86def2-ec10-4364-9008-8fbccf30475e&pf_rd_s=merchandised-search-9&pf_rd_t=101&pf_rd_i=15529609011&pf_rd_m=ATVPDKIKX0DER&pf_rd_r=WD9HGMRTX91GNP8DKA4Z",
                                    "urlImagem" : "https://images-na.ssl-images-amazon.com/images/I/51SgO0fSIuL._AC_SL1300_.jpg",
                                    "descricao" : "descrição Wireless Earbuds TaoTronics",
                                    "status" : "AGUARDANDO"
                                },
                                {
                                    "id" : 3,
                                    "nomeProduto" : "ASICS Men's GEL Venture 5 Running",
                                    "valorNegociado" : null,
                                    "dataDaEntrega" : null,
                                    "urlProduto" : "https://www.amazon.com/ASICS-Gel-Venture-5-M-Silver-Light/dp/B00NUZD2PW?ref_=Oct_DLandingS_D_6340036f_60&smid=A2NEM58BFPMEIL",
                                    "urlImagem" : "https://images-na.ssl-images-amazon.com/images/I/718OQVH7AnL._AC_UX625_.jpg",
                                    "descricao" : "descrição para ASICS ",
                                    "status" : "AGUARDANDO"
                                } ]
                    }
                });
    }
</script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
2 respostas

Olá, Bruno! Tudo bem contigo?

Desculpe a demora em dar um retorno!

No início do código,

<div class="container">
    <div th:replace="~{base :: titulo('Ofertas')}"></div>

    <div id="ofertas">

        <div class="card mb-3" v-for="pedido in pedidos">

o id="ofertas foi adicionado em uma div a parte, onde deveria estar dentro da div container

<div class="container" id="ofertas">
            <div th:replace="~{base :: titulo('Faça sua Oferta')}"></div>

            <div class="card mb-3" v-for="pedido in pedidos">

Só por desencargo, podemos remover o src="" de dentro da tag img

<img class="img-thumbnail" v-bind:src="$produto.urlIMGProduto" src=" ">

Acredito que com essas alterações consiga rodar normalmente, Bruno!

Um abraço e bons estudos

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software