Опция выбора по умолчанию для первого индекса при заполнении через массив из хранилища Vuex в Vue Component

Question

В моем магазине Vuex есть массив Projects. Я хочу пройтись по этим проектам и по умолчанию первый элемент. Я настроил v-модель на этом входе выбора, чтобы я мог использовать выбранный результат в своем локальном компоненте.

Я читал на этом SO, как я могу использовать v-модал, чтобы сделать это.

Однако, поскольку я заполняю магазин Vuex, я думаю, что мне нужно поступить иначе.

Итак, я выполнил свое действие Vuex, которое я называю обещанием, чтобы в моем компоненте я мог определить, когда оно разрешено, и затем я могу заполнить данные локального компонента (и, следовательно, входные данные выбора).

loadData: ({ commit }, payload) => {
  return new Promise((resolve, reject) => {
    // get projects on load
    axios
      .get("/api/projects/")
      .then(function(response) {
        commit("updateProjects", response.data);
        resolve();
      })
      .catch(function(error) {
        // handle error
        throw error;
      });
  });
};

Тогда в моем локальном компоненте у меня есть следующее срабатывание при создании ():

created() {
  this.$store
    .dispatch("loadData")
    .then((this.modalCreate.project = this.projects)); // dispatch loading
}

А внутри моего компонента у меня есть следующее:

<select class="form-control" v-model="modalCreate.project">
  <option
    v-for="(project, index) in projects"
    :value="project"
    :key="project.id"
  >
    {{ project.name }}
  </option>
</select>

В приведенном выше примере я использовал mapState для сопоставления моего store.projects с локальными проектами.

В этой настройке я вижу опции выбора, заполненные из локальных проектов (из Vuex), но я не могу получить форму выбора по умолчанию для первого индекса.

Я подозреваю, что это потому, что я не правильно сделал modalCreate.project первый store.project объект. В настоящее время мой modalCreate.project не определен.

Наиболее благодарен за любые советы о том, как наилучшим образом добиться этого, и о том, является ли преобразование состояния Vuex в локальное состояние чрезмерно инженерным решением.

-

Возможно, это решение для клонирования можно применить? Мне не повезло, хотя: ТАК ссылка

Answer 1

Полагаю, вы хотите выбрать первый проект (индекс === 0) в качестве проекта по умолчанию:

created() {
  this.$store
    .dispatch("loadData")
    .then(() => {
        this.modelCreate = {
            ...this.modelCreate,
            project: this.projects[0]
        }
    });
}