null值读取属性中观察者回调中的错误

Question

保存数据/s后，在我的控制台中出现了这个错误。我不熟悉Vue中的watch。尽管它读取值，但在v-model=“所选的”上，它会捕获来自watch属性的回调错误。

查看器“selected”的回调错误："TypeError:无法读取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();时，它运行得很好，但是表单中有数据。

Answer 1

出于某些原因，item有时会被设置为null，如果您想从null读取任何属性(例如值)，它将显示TypeError。

?代表可选(ES2020)，当您尝试从null或undefined获取属性时，它将不再通过添加?来显示错误。

想了解更多关于?的信息

链子

因此：

item.value

改为：

item?.value