title: Vue: Access values over api (nested)
body: <p>Hi Stackoverflow Community,</p>
  <p>In my template I try to show data which I receiver over an api call. When I log the api get response this is what I receive:
  <a href="https://i.stack.imgur.com/OdliM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OdliM.png" alt="enter image description here" /></a></p>
  <p>Now I try to show the data in location with the following code:
  <code>{{ userdetails.location.location_name }}</code></p>
  <p>My script looks like this:</p>
  <pre><code>data() {
      return {
        userdetails: [],
      };
    },
    methods: {
      getUserData() {
        DataService.getUserById()
          .then((response) =&gt; {
            this.userdetails = response.data;
            console.log(response);
          }) 
  
  ...
  
    created() {
      this.getUserData();
    },
  </code></pre>
  <p>The strange thing is, I can see the location_name in my application. But I also receive an error:<a href="https://i.stack.imgur.com/vCPuv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vCPuv.png" alt="enter image description here" /></a></p>
  <p>I think I made somewhere a mistake, but I can't find it. Do you have any ideas what I am doing wrong?</p>
  <p>Thank you in advance for all your tipps!</p>