Я получил эту ошибку TypeError: Невозможно прочитать свойство 'url' из NULL

Question

проблема в том, что при рендеринге контента мне нужно позвонить {{post.image.url}}, но я получаю эту проблему «Невозможно прочитать свойство 'url' с нулевым значением"

это мой код:

data() {
            return {
                posts: null,
                avatar: null
            }
        }

axios.get('/ajax/posts/' + user)
                    .then((response) => {
                        this.posts = response.data.posts;
                        this.avatar = response.data.avatar;
                        console.log(response.data.posts);
                    });

и мой php код для получения информации:

public function ajaxGetPosts($user)
    {
        $profile = User::findOrFail($user)->first();

        //dd($user->posts()->withCount('image')->get());
        $posts = $profile->posts()->with('image')->get();
        return response()->json([
            'posts' => $posts->toArray(),
            'avatar' => $profile->getAvatar()
        ]);
    }

и результат в console.log:

{
   "id":1,
   "user_id":1,
   "title":"Dolores voluptatem culpa dolor est.",
   "body":"Iste et ratione atque inventore. Quo ex ea repellat saepe est ad est dicta. Magni eum omnis dolor quam provident mollitia.",
   "created_at":"2020-03-22T16:04:47.000000Z",
   "updated_at":"2020-03-22T16:04:47.000000Z",
   "image":    {
          "id":1,
          "url":"https://loremflickr.com/600/800",
          "imageable_type":"App\\Post",
          "imageable_id":1,
          "created_at":"2020-03-22T16:57:14.000000Z",
          "updated_at":"2020-03-22T16:57:14.000000Z"
       }
}

Answer 1

Комментарии дают вам представление о том, как решить проблему. и вот почему:

при загрузке страницы / компонента, если вы используете data для визуализации шаблона, он будет отображать шаблон с данными инициализации, которые вы определили, это null для posts в вашем коде.

, чтобы исправить это, либо вы положили некоторые данные по умолчанию для вашей data опоры в ваш Vue компонент. как

data() {
            return {
                posts:[{image:{url: "../assets/logo.png"}}],

            }
        }

или использование if или ?: в шаблоне.

Лично мне нравится мой способ, этот способ позволяет вам узнать, какова ваша структура данных. сделайте ваш код понятным и простым для отладки.