Почему не отображается компонент?

Question

[Kazah90]

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

<template>
<div>

                    <div class="blog" v-for="prod in myData">
                   
                    <li  >{{ prod.title}}</li>
                   </div>



</div>
</template>
<script>
export default {

    props: ['myData']
    }
</script>
<style>
    .blog {
      width: 200px;
      height: 200px;
      border: 1px solid black;
      color:red;
    }
  </style>

Перелазил по докам не нашел в чем может быть ошибка.Можете тыкнуть меня и сказать,где ошибка.

Answer 1

[0xD34F]

Я бы предположил, что компонент на самом деле отображается, а вот с данными проблема. Как вы передаёте данные в компонент? Выскажу ещё одну догадку, выглядит это у вас как-то так:

<my-fucking-component :myData="someData">

Ну а как подсказывает документация:

Имена HTML-атрибутов являются регистро-независимыми, поэтому браузеры интерпретируют любые прописные символы как строчные. Это означает, что при использовании шаблонов в DOM, входные параметры в camelCase стиле должны использовать свои эквиваленты в стиле kebab-case

Comments

[Kazah90]

Я это читал,и учел этот факт.

<seachproducts-component :my-data="{{ $searchData}}"  ></seachproducts-component>

Данные у меня так передаются

[Kazah90]

Если не запускать в цикл,то данные нормально отображаются,то мне нужен именно цикл

[0xD34F]

Kazah90, а, ну так у вас наверное тогда там не массив, а один объект. Покажите, как данные выглядят.

[Kazah90]

0xD34F, на компанет приходят в виде объекта.

[Kazah90]

Если я правильно понял в контролере нужно сделать,чтобы приходил массив данных а не объект ?

[0xD34F]

Kazah90, не знаю. Говорю же - покажите как данные выглядят.

[Kazah90]

0xD34F,

spoiler

<seachproducts-component :my-data="{&quot;id&quot;:1,&quot;title&quot;:&quot;\u041b\u0430\u043c\u0438\u043d\u0430\u0442 UNILIN (Balterio) Xpert Pro-Better Standard \u0414\u0443\u0431 \u043c\u043e\u0440\u043e\u0437\u043d\u044b\u0439 (60705) \r\n&quot;,&quot;price&quot;:701,&quot;description&quot;:&quot;\u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f UNILIN \u0431\u044b\u043b\u0430 \u0441\u043e\u0437\u0434\u0430\u043d\u0430 \u0432 60-\u044b\u0435 \u0433\u043e\u0434\u044b \u0433\u0440\u0443\u043f\u043f\u043e\u0439 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442\u0435\u043b\u0435\u0439 \u043b\u044c\u043d\u0430 \u0432 \u0441\u043e\u0441\u0442\u0430\u0432\u0435 \u043e\u043a\u043e\u043b\u043e 40 \u0447\u0435\u043b\u043e\u0432\u0435\u043a. \u0421 \u0442\u0435\u0445 \u043f\u043e\u0440 \u043a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043f\u0440\u0435\u0432\u0440\u0430\u0442\u0438\u043b\u0430\u0441\u044c \u0432 \u0438\u0433\u0440\u043e\u043a\u0430 \u043c\u0438\u0440\u043e\u0432\u043e\u0433\u043e \u0443\u0440\u043e\u0432\u043d\u044f \u0432 \u043e\u0431\u043b\u0430\u0441\u0442\u0438 \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0441\u0442\u0432\u0430 \u043f\u043e\u043b\u043e\u0432, \u0438\u0437\u0432\u0435\u0441\u0442\u043d\u043e\u0433\u043e \u043f\u0440\u0435\u0436\u0434\u0435 \u0432\u0441\u0435\u0433\u043e \u0431\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u043f\u043e\u043b\u0430\u043c Quick-Step. \u041e\u0434\u043d\u0430\u043a\u043e UNILIN \u2013 \u044d\u0442\u043e \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435, \u0447\u0435\u043c Quick-Step. \u041a\u043e\u043c\u043f\u0430\u043d\u0438\u044f \u043f\u0440\u043e\u0438\u0437\u0432\u043e\u0434\u0438\u0442 \u0442\u0430\u043a\u0436\u0435 \u043a\u0440\u043e\u0432\u0435\u043b\u044c\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b, \u0438\u0437\u043e\u043b\u044f\u0446\u0438\u043e\u043d\u043d\u044b\u0435 \u043f\u0430\u043d\u0435\u043b\u0438, \u043c\u0435\u0431\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u043b\u0438\u0442\u044b \u0438 \u0442.\u0434.\r\n&quot;,&quot;mini-description&quot;:&quot;&lt;p&gt;\u0415\u0434\u0438\u043d\u0438\u0446\u0430 \u043f\u0440\u043e\u0434\u0430\u0436\u0438:&lt;\/p&gt;\r\n&lt;span&gt;1 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0430&lt;\/span&gt;\r\n&lt;p&gt;\u041a\u043b\u0430\u0441\u0441 \u0438\u0437\u043d\u043e\u0441\u043e\u0441\u0442\u043e\u0439\u043a\u043e\u0441\u0442\u0438:&lt;\/p&gt;\r\n&lt;span&gt;32 \u043a\u043b\u0430\u0441\u0441&lt;\/span&gt;\r\n&lt;p&gt;\u041a\u043e\u043b\u043b\u0435\u043a\u0446\u0438\u044f:&lt;\/p&gt;\r\n&lt;span&gt;Xpert Pro Better Standart&lt;\/span&gt;\r\n&lt;p&gt;\u0414\u0438\u0437\u0430\u0439\u043d \u043f\u043b\u0430\u043d\u043a\u0438:&lt;\/p&gt;\r\n&lt;span&gt;\u041e\u0434\u043d\u043e\u043f\u043e\u043b\u043e\u0441\u043d\u0430\u044f \u0434\u043e\u0441\u043a\u0430&lt;\/span&gt;\r\n&lt;p&gt;\u041e\u0442\u0442\u0435\u043d\u043e\u043a:&lt;\/p&gt;\r\n&lt;span&gt;\u0411\u0435\u043b\u044b\u0435 \u043e\u0442\u0442\u0435\u043d\u043a\u0438&lt;\/span&gt;\r\n&lt;p&gt;\u0414\u043b\u0438\u043d\u0430:&lt;\/p&gt;\r\n&lt;span&gt;1257 \u043c\u043c&lt;\/span&gt;\r\n&lt;p&gt;\u0428\u0438\u0440\u0438\u043d\u0430:&lt;\/p&gt;\r\n&lt;span&gt;190.5 \u043c\u043c&lt;\/span&gt;\r\n&lt;p&gt;\u0422\u043e\u043b\u0449\u0438\u043d\u0430:&lt;\/p&gt;\r\n&lt;span&gt;8 \u043c\u043c&lt;\/span&gt;\r\n&lt;p&gt;\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0432 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0435:&lt;\/p&gt;\r\n&lt;span&gt;9 \u0448\u0442&lt;\/span&gt;\r\n&lt;p&gt;\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u0432 \u0443\u043f\u0430\u043a\u043e\u0432\u043a\u0435:&lt;\/p&gt;\r\n&lt;span&gt;2.155 \u043c\u00b2&lt;\/span&gt;&quot;,&quot;videos&quot;:&quot;&lt;iframe width=\&quot;560\&quot; height=\&quot;315\&quot; src=\&quot;https:\/\/www.youtube.com\/embed\/n4jFs1m_3k4\&quot; frameborder=\&quot;0\&quot; allow=\&quot;autoplay; encrypted-media\&quot; allowfullscreen&gt;&lt;\/iframe&gt;&quot;,&quot;dates&quot;:&quot;2018-06-29 07:04:32&quot;,&quot;count_view&quot;:0,&quot;recommend&quot;:0,&quot;new&quot;:0,&quot;sale&quot;:0,&quot;week&quot;:0,&quot;like&quot;:0,&quot;comment_id&quot;:1,&quot;image_id&quot;:1,&quot;created_at&quot;:null,&quot;updated_at&quot;:null}"  ></seachproducts-component>

[0xD34F]

Kazah90, ну да, заверните в массив.

[Kazah90]

Эх была у меня когда-то с пхп связанная проблема с типами данных))Потерял бдительность опять на нее наткнулся.Теперь все работает.Спасибо за помощь