Блог

Главная - Вопросы по программированию - Маршрутизатор Vue с выборкой данных

Маршрутизатор Vue с выборкой данных

#vue.js

#vue.js

Вопрос:

Как бы мне продолжить выборку идентификатора в качестве параметра при использовании параметров (не запроса) в router.push?

Я предполагаю, что мой пример не является оптимальным. Как бы мне сделать это лучше?

 const Cities = Vue.component('city', {
    template: '<h1>{{  }}</h1>',
    created() {
      fetch('')
      .then((response) => response.json())
      .then((result) => {
  
        this.$router.push({ path: "/:id", params: {  } });
        this.cities = result
        console.log(this.cities)
      });

    },
    data() {
      return {
        cities: { 
          name: "",
          id: ""
        }
      }
    }
});

const router = new VueRouter({
  routes: [
    {
      component: Cities,
      path: '/:id'
    }
  ]
});



new Vue({
  el: '#app'
router

Комментарии:

1. Когда вы используете параметры в $router.push , вы можете позже получить доступ к этим параметрам внутри компонента, this.$route.params.id например. Я не уверен, что вы это имеете в виду, поэтому пока просто комментирую.

2. спасибо за комментарий. Я собираюсь выполнить выборку и из каждого объекта я буду использовать «id» в качестве параметра и «name» для отображения на странице

3. Ну, вы не можете полагаться на cities [1], потому что города не будут загружены, пока ваша выборка не разрешится. Vue будет жаловаться на ошибки неопределенных свойств. Сначала вы должны проверить, установлены ли города, а затем выполнить итерацию каждого города: <div v-if="cities"><div v-for="city in cities">{{city.name}}</div></div> кроме того, то, что вы определяете в функции данных, является несоответствием, это должен быть пустой массив городов вместо 1 объекта с идентификатором и именем.

4. Вы не хотите перебирать все города в шаблоне, верно? Вы просто хотите отобразить один конкретный город?

5. да, поэтому я хочу отобразить {{name}} города, который соответствует идентификатору параметра. они должны поступать из одного и того же объекта. таким образом, идентификатор и название города будут совпадать

Ответ №1:

Преобразование массива в объект по идентификатору

Я просто сосредоточен на отображении названия города здесь. Итак, вы получаете свой результат из запроса, я предполагаю, что ответ выглядит следующим образом :

 [
  {
    id : "9123102873",
    name : "Alpha"
  },
  {
    id : "1928307239",
    name : "Delta"
  }
]

Одним из вариантов было бы создать карту из массива, например

 
fetch(' ')
.then((response) => response.json())
.then((result) => {
       
  const cityMap = {};
  result.map((city) => {
    cityMap[city.id] = city;
  });
  this.cities = cityMap;

});

итак, это выглядит так

 {
  "9123102873" : {
    id : "9123102873",
    name : "Alpha"
  },
  "9123102873" : {
    id : "1928307239",
    name : "Delta"
  }
}

Теперь вы можете отображать город по идентификатору, например

 <h1> {{ cities[$route.params.id].name }} </h1>

Осторожно

🚧 Но это, вероятно, вызовет ошибку, поскольку в тот момент, когда вы вводите этот компонент, cities[whatever].name он все равно будет неопределенным, пока запрос не будет выполнен.

🚧 Также не рекомендуется извлекать все города каждый раз, когда вы посещаете этот маршрут, просто слишком отфильтровывайте один конкретный город впоследствии. Может быть, API поддерживает выборку одного города напрямую? Или вы можете взглянуть на VUEX

Метки: