Question

我正在构建一个HackerNews克隆，并且遇到以下错误：

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>

此组件的模板代码如下：

<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>

如果有人可以提供帮助，那会很好吗？

Answer 1

我的最佳猜测是您正在对未在第一个渲染器上定义的数据执行host过滤器。解决此问题的最简单方法是根据是否加载了实际故事来有条件地显示故事。您还可以适当地处理主机过滤器的值不是字符串的情况，并返回默认值。

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

[Vue警告]：渲染错误：“ TypeError：无法读取未定义的属性'replace'”

1 个答案: