Vue composition API value set, but still null in catch

Question

I have created this logic that when doing it's happy path, everything works fine. But when there is an error, I want to display it on the interface. My code looks like this (trimmed):

export function initCamera() {
  const loaded = ref(false);
  const cameras = ref([]);
  const error = ref(null);

  someTask().then((response) => {
      cameras.value = response;
  loaded.value = true;
    })
    .catch((error) => {
      console.log("we got an error", error);
  loaded.value = true;
      error.value = error;
      console.log(error.value);
    });

  return { loaded, cameras, error };
}

If there are no errors, then the interface does have access to the cameras and the loaded flag is set to true. If there is an error, it does set the loaded flag, but the error is always null.

All the console logs you see there display a value. My component looks like this:

export default defineComponent({
  name: "TheScanner",
  directives: {
    content,
  },
  emits: ["onExpand"],
  setup() {
    let init = false;
    const result = reactive({ loaded: Boolean, cameras: null, error: null });
    const expanded = ref(false);
    const instance = getCurrentInstance();

    const expand = (value: boolean) => {
      expanded.value = value;
      instance.proxy.$emit("onExpand", value);
    };

    watch(
      () => expanded.value,
      (value) => {
        if (!value || init) return;
        init = true;
        Object.assign(result, initCamera());
        console.log(result);
      }
    );

    return { expanded, expand, ...toRefs(result) };
  },
});

As you can see, I have setup the result as a reactive property and use Object.assign to assign my response to it. That console log there will show the cameras and loaded boolean values, but never shows the error. It's always null.

Does anyone know why?

coma · Accepted Answer · 2021-07-16 10:05:21Z

1

Change the variable name 'error' into someting else, because you have declared another variable named 'error' above, the ref. In catch block, the variable 'error' points the error object, not the ref.

export function initCamera() {
  const loaded = ref(false);
  const cameras = ref([]);
  const error = ref(null);

  someTask().then((response) => {
    cameras.value = response;
    loaded.value = true;
  })
  // Pay attention to this line
  .catch((err) => {
   console.log("we got an error", err);
   loaded.value = true;
   error.value = err;
   console.log(error.value);
  });

  return { loaded, cameras, error };
}

answered Jul 16, 2021 at 10:05

coma

1832 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue composition API value set, but still null in catch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related