Vue syntax error

Question

I am trying to print out the name property of an object using Vue.

Here's what I tried {{ selectedTopic.name }}, this throws this error Uncaught TypeError: Cannot read property 'name' of null

If I print out {{ selectedTopic }} it will wait until that data is available and then display without errors.

Now I understand that the data I'm requesting is not available at that stage, but why is it throwing an error? Shouldn't it just wait until that data becomes available like it does for {{ selectedTopic }}?

Vue app

  var qaSuggest = new Vue({
    el: '#qa-suggest',
    data: {
      selectedTopic: null,
      profiles: []
    },
    mounted() {
      bus.$on("send-topic", selectedTopic => this.selectedTopic = selectedTopic);
    },
    updated(){
      axios.get('/vueprofiles').then(response => this.profiles = response.data);
      console.log('selectedTopic: ', this.selectedTopic.name);
    }
  });

HTML

<div id="qa-suggest">
    <ul class="list-unstyled">
        <li v-for="profile in profiles">
          <div class="clearfix" style="border-bottom: 1px solid #ddd; padding: 5px;">
        <div class="pull-left">
          <img :src="profile.picture" class="img-responsive" style="max-width: 60px; margin-right: 10px;">
        </div>
        <div class="pull-left">
          <p style="font-size: 12px; margin-bottom: 0;">{{ profile.category }} / {{ profile.subcategory }}</p>
          <p><strong>{{ profile.name }}</strong></p>
        </div>
      </div>
    </li>
</ul>

Topic: {{ selectedTopic.name }}

Thanks guys both answers work great :)

Clinton Green
– Clinton Green

2017-03-29 22:04:49 +00:00
Commented Mar 29, 2017 at 22:04 — Clinton Green
– Clinton Green, Commented Mar 29, 2017 at 22:04

Decade Moon · Accepted Answer · 2017-03-29 22:04:43Z

1

You'll get the same kind of error if that were put into a computed property. Vue just executes the JS code as-is without any kind of null-protection.

In your case, I would protect that part of the template with a v-if="selectedTopic", or just use null checking directly in the interpolation: {{ selectedTopic ? selectedTopic.name : 'No topic selected' }}.

You could also initialize it to a default value, like an empty object {}, but in my opinion this is flawed because selectedTopic is now non-null but in fact no actual topic is selected, which complicates the code.

answered Mar 29, 2017 at 22:04

Decade Moon

34.4k8 gold badges84 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Roy J · Accepted Answer · 2017-03-29 21:58:29Z

1

It doesn't "wait" so much as understand that undefined should be an empty string. You could initialize selectedTopic with an empty object, and you would get the result you're looking for.

data: {
  selectedTopic: {},
  profiles: []
},

answered Mar 29, 2017 at 21:58

Roy J

44k10 gold badges84 silver badges106 bronze badges

Comments

Bert · Accepted Answer · 2017-03-29 22:08:36Z

1

The error is because you can't access a property on an object that is null. Instead, you might try

{{ selectedTopic ? selectedTopic.name : '' }}

edited Mar 29, 2017 at 22:08

answered Mar 29, 2017 at 21:58

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Collectives™ on Stack Overflow

Vue syntax error

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related