Блог

Главная - Вопросы по программированию - Vuejs, показывающие необработанный синтаксис в коде и не отображающие содержимое

Vuejs, показывающие необработанный синтаксис в коде и не отображающие содержимое

#javascript #vue.js

#javascript #vue.js

Вопрос:

У меня есть приложение для корзины покупок, состоящее из 3 страниц. страницы отображаются / скрываются с помощью css в зависимости от того, какую часть процесса они завершили.

Для первых 2 страниц vue работает идеально, я даже могу использовать инструменты разработки vue, чтобы просмотреть все мои данные. Но как только я добираюсь до 3-й страницы, vue останавливается, он показывает необработанный контент, такой как на этом скриншоте — https://share.getcloudapp.com/2NujBEmb

Как только я добираюсь до 3-й страницы, взглянув на инструменты vue, я вижу, что эти точно такие же данные не равны нулю, а вместо этого правильно заполнены данными, как и ожидалось. Просто не отображается на странице.

Кто-нибудь когда-нибудь сталкивался с проблемой, подобной этой? До сих пор я пытался использовать отдельный cdn, проверяя наличие поврежденных тегов и тегов с неправильными именами, но все кажется прекрасным.

Вот небольшой фрагмент кода адреса доставки, если я что-то упускаю

 <div class="review-details">
            <p class="sc-back-text" v-on:click="nextPrev(-1)"><i class="fas fa-caret-left"></i>BACK TO EDIT ORDER</p>
            <h2 class="red-text section-title">Review Details</h2>
            <p><b>First Name:</b> {{ deliveryAddress.firstName }}</p>
            <p><b>Last Name:</b> {{ deliveryAddress.lastName }}</p>
            <p><b>Email:</b> {{ deliveryAddress.email }}</p>
            <p><b>Company Name:</b> {{ deliveryAddress.companyName }}</p>
            <p><b>Job Title:</b> {{ deliveryAddress.jobTitle }}</p>
            <p><b>Address 1:</b> {{ deliveryAddress.address1 }}</p>
            <p><b>Address 2:</b> {{ deliveryAddress.address2 }}</p>
            <div class="review-details-split">
                <div class="review-details-1">
                    <p><b>City:</b> {{ deliveryAddress.city }}</p>
                    <p><b>Country:</b> {{ deliveryAddress.country }}</p>
                    <p v-if="countryIsUSA"><b>State:</b> {{ deliveryAddress.state }}</p>
                    <p v-if="countryIsCAN"><b>Province:</b> {{ deliveryAddress.province }}</p>
                    <p v-if="countryIsREGION"><b>Region:</b> {{ deliveryAddress.region }}</p>
                </div>
                <div class="review-details-2">
                    <p><b>Zip Code:</b> {{ deliveryAddress.zipCode }}</p>
                    <p><b>Phone Number:</b> {{ deliveryAddress.phoneNumber }}</p>
                </div>
            </div>
        </div>

Комментарии:

1. Я вижу ваш скриншот и вижу, что вы добавили кавычки ( » ) для переноса переменной. поэтому используйте его без кавычек ( » ), т.е. Используйте {{ DeliveryAddress.email }} вместо «{{ DeliveryAddress.email }}»

2. не могли бы вы также добавить свой скрипт, пожалуйста?

3. @PunitPatel Я тоже это заметил, но вы можете видеть во фрагменте кода, что я на самом деле не использую кавычки. Я не уверен, почему его рендеринг в кавычках

4. @JaySnel Итак, я не уверен, какой другой код у вас есть, но я делюсь с вами структурой компонентов, чтобы вы могли сравнить свой. <template> </template> <script> export default { name: "test" } </script> <style scoped> </style> Ваш HTML-код должен находиться под тегом <template></template>

5. @PunitPatel спасибо! Моя проблема заключалась в том, что при переносе приложения у меня не было этого раздела внутри основного тега #app div. Ваше решение взглянуть на теги шаблонов привело меня к этому, и теперь я готов идти