Блог

Главная - Вопросы по программированию - Ошибка в обратном вызове для наблюдателя в Vue, считывающего свойства null

Ошибка в обратном вызове для наблюдателя в Vue, считывающего свойства null

#vue.js #vuex

#vue.js #vuex

Вопрос:

Получил эту ошибку в моей консоли после сохранения данных. Я не знаком с watch в Vue. хотя он считывает значение, но при выборе v-model=»он улавливает ошибку обратного вызова из свойства watch.

Ошибка в обратном вызове для наблюдателя «выбрано»: «Ошибка типа: не удается прочитать свойства null (чтение «значения»)»

мой код компонента:

 <template>
  <v-select
    :items="project_types"
    item-text="description"
    item-value="id"
    v-model="selected"
    return-object
    :menu-props="{ bottom: true, offsetY: true }"
    append-icon="fas fa-chevron-down"
    placeholder="Type"
    outlined
    dense
  />
</template>

<script>
import {
  httpSuccessResponseLogger,
  httpErrorResponseLogger
} from "@/helpers/logger";

export default {
  name: "TypeDropdown",
  data: () => ({
    project_types: [],
    selected: null
  }),
  methods: {
    getProjectStatuses() {
      this.$api.get("providers/project-types")
        .then(response => {
          httpSuccessResponseLogger(response);

          this.project_types = this.$_.get(response, "data.result.project_types", []);

        })
        .catch(error => {
          httpErrorResponseLogger(error);
        })

    }
  },
  created() {
    this.getProjectStatuses();
  },
  watch: {
    selected(item) {
      console.log({valueOf: item.value})
      this.$store.commit("projects/SET_FILTER_TYPE", {
        type: item.value
      });
    }
  }
};
</script>

<style scoped></style>

и в моем Vuex с модулем:

 export default {
  namespaced: true,
  state: {
    filter: {
      type: []
    }
  },
  getters: {},
  mutations: {
    SET_FILTER_TYPE: (state, { type }) => (state.filter.type = type)
  },
  actions: {

  }
};

надеюсь, вы сможете помочь. Проблема заключалась this.$refs.form.reset(); в том, как сделать так, чтобы мои данные не были пустыми или нулевыми значениями. когда я удалил this.$refs.form.reset(); его, он работал нормально, но в форме есть данные.

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

1. selected начальное значение null , попробуйте изменить его на {}

2. Это не watch проблема option, проверьте свое selected значение

3. проблема по-прежнему сохраняется [Vue warn]: Error in callback for watcher "selected": "TypeError: Cannot read properties of null (reading 'value')"

4. вы проверяли значение из project_types ? эта ситуация выглядит так project_types null , как будто в ней есть массив. например: project_types = [{value}, null, ...]

5. @RyanLeung проблема заключалась в this.$refs.form.reset(); том, что она v-model=selected установит значение null, что может вызвать проблему.

Ответ №1:

По некоторым причинам item для параметра будет установлено значение null иногда, и если вы захотите прочитать какое-либо свойство (например, значение) null , оно покажет TypeError .

? означает необязательный (ES2020), когда вы пытаетесь получить свойство из null или undefined , он больше не будет показывать ошибку при добавлении ? .

чтобы узнать больше о ?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining

итак:

item.value

измените его на:

item?.value

Метки: