Не можете использовать v-img в этом случае? - PullRequest
Новая
       19

Не можете использовать v-img в этом случае?

0 голосов
/ 19 октября 2018

Я копирую / вставляю этот код в мое приложение Nuxt.js, где я использую Vuetify, в файл компонента, в который помещается только тег <template>: 

<v-card>
    <v-container
      fluid
      grid-list-lg
    >
      <v-layout row wrap> 

        <v-flex xs12>
          <v-card color="purple" class="white--text">
            <v-layout row>
              <v-flex xs7>
                <v-card-title primary-title>
                  <div>
                    <div class="headline">Halycon Days</div>
                    <div>Ellie Goulding</div>
                    <div>(2013)</div>
                  </div>
                </v-card-title>
              </v-flex>
              <v-flex xs5>
                <v-img
                  src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
                  height="125px"
                  contain
                ></v-img>
              </v-flex>
            </v-layout>
            <v-divider light></v-divider>
            <v-card-actions class="pa-3">
              Rate this album
              <v-spacer></v-spacer>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>

Но яПолучение этого сообщения об ошибке в инструментах разработки Google Chrome:

Это, вероятно, вызвано неправильной разметкой HTML, например, вложением элементов уровня блока внутри

, или отсутствием.Отказ от гидратации и выполнение полного рендеринга на стороне клиента.

Я заметил, что когда я удаляю компонент, это сообщение об ошибке исчезает.Как это исправить?

Я видел вопросы с похожими заголовками, такими как этот: Ошибка Vuejs: виртуальное дерево DOM на стороне клиента не соответствует отрендеренному серверу , но я уже знаю, какиекомпонент вызывает проблему.

Это происходит как в Chrome, так и в Firefox

Ответы [ 2 ]

0 голосов
/ 19 октября 2018

Оберните v-img без-ssr.Это сделает это. 

<no-ssr>
  <v-img
    src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
     height="125px"
      contain
  ></v-img>
</no-ssr>
0 голосов
/ 19 октября 2018

Вы завернули всю страницу с <v-app>?

...