Блог

В приложении vue я получаю elementId URL-адрес для передачи получателю vuex:

 <template>
  <p>elementId: {{ elementId }}</p>
  <p>loadedElement: {{ loadedElement }}</p>
</template>

<script>
export default {
  data() {
    return {
      elementId: this.$route.params.id,
    };
  },
  computed: {
    loadedElement() {
      return this.$store.getters.getElementById(this.elementId);
    },
  },
};
</script>
 

Получатель:

 getElementById: (state) => (id) => {
  return state.elements.find(ele => ele.id === id)
},
 

Прямо сейчас страница отображается следующим образом:

Однако при жестком коде an elementId это работает:

 <template>
  <p>elementId: {{ elementId }}</p>
  <p>loadedElement: {{ loadedElement }}</p>
</template>

<script>
export default {
  data() {
    return {
      elementId: 3,
    };
  },
  computed: {
    loadedElement() {
      return this.$store.getters.getElementById(this.elementId);
    },
  },
};
</script>
 

Я не понимаю, что я делаю не так, поскольку получение elementId из маршрута, похоже, работает, но оно не передается в функцию получения.

Что я делаю не так?

Скорее this.$route.params.elementId всего, это строка, но идентификаторы ваших элементов — это числа. Использование === для сравнения строки и числа не будет совпадать.

Попробуйте использовать == вместо этого или преобразовать this.$route.params.elementId в число:

 data() {
  return {
    elementId:  this.$route.params.id,
  };
},
 

(Конечно, возможно, вы хотите выполнить дополнительную проверку ошибок как часть этого.)