[Vue warn]: Error in render: “TypeError: Cannot read property 'replace' of undefined”

0
votes

I'm building a HackerNews clone and am experiencing the following error:

vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: Cannot read property 'replace' of undefined"

found in

---> <Item> at src/components/Item.vue
       <Homepage> at src/components/Homepage.vue
         <App> at src/App.vue
           <Root>

The template code for this component is as follows:

<template>
  <div class="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>

If anyone can assist in this, that would be great?

1
javascriptvue.js
where you trying to get replace data in your template ? – Emtiaz Zahid
I'm pulling the data in using axios ... the script part of this component is as follows: – Drostan
<script> export default { name: 'Item', props: [ 'story' ] } </script> – Drostan
i am not seeing any "replace" data in your template – Emtiaz Zahid
I guess you did not register router with Vue instance... can you share new Vue({ ... codes? – Sajib Khan

1 Answers

0
votes

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');
});