Vue에서 null 속성을 읽는 동안 워처에 대한 콜백 오류가 발생했습니다.

Vue에서 null 속성을 읽는 동안 워처에 대한 콜백 오류가 발생했습니다.

데이터를 저장한 후 콘솔에 이 오류가 표시되었습니다.Vue에서는 워치에 익숙하지 않습니다. 값을 읽지만 v-model="선택한 경우 워치 속성에서 콜백 오류를 포착합니다.

워처 "selected" 콜백 오류: "TypeError: null 속성을 읽을 수 없습니다('value' 읽기)"

내 컴포넌트 코드:

<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();데이터 값이 비어 있지 않거나 null 값이 되지 않도록 하는 방법에 대해 설명합니다.제거했듯이this.$refs.form.reset();정상적으로 동작하고 있었지만, 폼에 데이터가 있습니다.

어떤 이유에선지item로 설정되다null(값 등의) 속성을 읽고 싶은 경우nullTypeError 가 표시됩니다.

?optional(ES2020)의 약자로 속성을 취득하려고 할 때null또는undefined, 를 추가해도 에러는 표시되지 않습니다.?.

보다 자세히 보다?

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

따라서:

item.value

다음으로 변경합니다.

item?.value

언급URL : https://stackoverflow.com/questions/70284373/error-in-callback-for-watcher-in-vue-reading-properties-of-null