Как решить: [Vue warn]: Ошибка при рендеринге: «Ошибка типа: Не удается прочитать свойство ... из неопределенного»

Question

В проекте Vue я пытаюсь вернуть URL для каждого инструмента в наборе инструментов.

Контекст

Это соответствующий фрагмент в файле ToolDetails.vue:

<script>
import { mapActions } from 'vuex';
import ToolFacts from '@/components/ToolFacts.vue';
import Matrix from '@/components/Matrix.vue';
import json from '../../models/content/tool_details.json';

export default {
  name: 'tool-details',
  components: {
    ToolFacts,
    Matrix,
  },
  data: () => ({
    // tool: '',
  }),
  created() {
    this.checkValidToolName();
    // this.getToolName();
  },
  computed: {
    tool() {
      // eslint-disable-next-line
      return Object.values(json).find(entity => entity.tool_url.toLowerCase() === this.$route.params.name.toLowerCase());
    },
  },
  methods: {
    getToolName() {
      this.tool = json[this.$route.params.name];
      // eslint-disable-next-line
      return Object.values(json).for.find(entity => entity.tool_url.toLowerCase() === this.$route.params.name.toLowerCase());
    },
    getAssetPath(assetPath) {
      // eslint-disable-next-line
      return require(`../assets/${assetPath}`);
    },
    ...mapActions(['SET_PRESELECTED_TOOL']),
    compareTool() {
      this.SET_PRESELECTED_TOOL(this.tool.name)
        .then(this.$router.push('/compare'));
    },
    checkValidToolName() {
      if (!this.tool) {
        this.$router.push('/filter');
      }
    },
  },
};
</script>

tool_details.json отформатирован следующим образом:

{
  "Example Tool": {
    "name": "Example Tool Name",
    "tool_url": "example-tool-url",
    ...
  },
  ...
}

Проблема

URL-адреса генерируются как undefined в исходном коде браузера иконсоль отображает эту ошибку:

vue.runtime.esm.js:619 [Vue warn]: Error in render: "TypeError: Cannot read property 'toLowerCase' of undefined"

found in

---> <ToolDetails> at src/views/ToolDetails.vue
       <App> at src/App.vue
         <Root>

vue.runtime.esm.js:1888 TypeError: Cannot read property 'toLowerCase' of undefined
    at ToolDetails.vue:78
    at Array.find (<anonymous>)
    at VueComponent.tool (ToolDetails.vue:78)
    at Watcher.get (vue.runtime.esm.js:4473)
    at Watcher.evaluate (vue.runtime.esm.js:4578)
    at VueComponent.computedGetter [as tool] (vue.runtime.esm.js:4830)
    at Object.get (vue.runtime.esm.js:2072)
    at Proxy.render (ToolDetails.vue?bf00:13)
    at VueComponent.Vue._render (vue.runtime.esm.js:3542)
    at VueComponent.updateComponent (vue.runtime.esm.js:4060)

Когда я включаю отладчик, определяется json, но не entity.

Я пытался определить entity следующим образом:

const entity = [];

и это:

const entity = {};

, но я получаю ту же ошибку консоли плюс ошибку ES Lint:

'entity' is assigned a value but never used

Как я могу разрешить эту ошибку консоли ввернуть правильный URL для каждого инструмента?

Answer 1

Это решено. По-видимому, проблема была вызвана из другого файла, ToolCard.vue, в котором было это:

<div class="learn-cta">
  <router-link tag="a" :to="`tool/${data.tool_url}`">
    Learn More
  </router-link>
  <img src="@/assets/icons/arrow_blue.svg" />
</div>

, ссылающегося на tool_cards.json, в который мне нужно было добавить строку tool_url. Это заставило URL-адреса правильно генерироваться для каждой ссылки на инструмент, и ошибка undefined исчезла.