[Vuejs]-[Vue warn]: Error in render: "TypeError: Cannot read property 'replace' of undefined"

by

0👍

My best guess is that you are executing the host filter on data that is not defined on the first render. The easiest way to work around that is to conditionally display the story based on if you have an actual story loaded. You could also gracefully handle cases where the value for the host filter is not a string, and return a default value.

<template>
  <div class="story" v-if="story">
    <span class="score">{{ story.data.score }}</span>
    <router-link :to="{ path: '/story/' + story.data.id }">{{ story.data.title }}<span>{{ story.data.url | host }}</span></router-link><br/>
    <span class="meta">
    by {{ story.data.by }} | {{ story.data.time }} Ago | {{ story.data.descendants }} comments
    </span>
  </div>
</template>

// Or for the filter
Vue.filter('host', (value) => {
  if (!value) {
    return value;
  }

  return value.replace('something', 'something else');
});

Leave a comment