Не удается загрузить свойство из ответа API внутри шаблона Vue

Question

Я загружаю имя, если текущий пользователь находится внутри шаблона, но оно не отображается, однако сам объект загружается нормально.

<div v-if="currentUser">
            Hello {{currentUser.name}}
            Hello {{currentUser}}
          <router-link to="#">
            <button class="btn btn-outline-dark nav-button" @click="logout">Log out</button>
          </router-link>
</div>

Вывод этого

Hello Hello {"name":"John"}

То есть загружается сам объект, но не свойство name.

Answer 1

Исходя из ответа, я предполагаю, что ваш ответ не был проанализирован как JSON

, вы можете попробовать

<div v-if="currentUser">
  Hello {{JSON.parse(currentUser).name}}
  <router-link to="#">
    <button class="btn" @click="logout">Log out</button>
  </router-link>
</div>

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

this.currentUser = JSON.parse(response);

, и тогда вы можете использовать ее так же, как и