Vue Composition Api - watch property passed to external composition function

Question

I want to watch props passed to a composition function from setup:

async setup(props) {
  const { data } = await useOperation(query, props.isEdit);
}

and each time the value of isEdit changes, I want to do something in the watch:

export const useOperation = async (query, isEdit) => {
  const reload = ref(isEdit)
  watch(
    () => reload.value,
    (result) => {
      console.log(result)
    }
  )
  const { data } = await fetch(query)

  return {
    data
  }
}

When props.isEdit changes, the watch is not triggered. How do I make this work?

akuiper · Accepted Answer · 2021-07-18 17:01:54Z

1

You should watch the props change directly in setup:

async setup(props) {
  const { data } = await useOperation(query, props.isEdit);

  watch(
    () => props.isEdit,
    (result) => {
      console.log(result)
    }
  )
}

By running:

watch(
  () => reload.value,
  (result) => {
    console.log(result)
  }
)

You are watching the reload variable instead of props.isEdit, and since useOperation is only run once during setup, and reload is not exposed anywhere, its value will never be changed.

Or if you do want to watch in useOperation, make sure you pass in the props as parameter, and watch for props.isEdit:

export const useOperation = async (query, props) => {
  watch(
    () => props.isEdit,
    (result) => {
      console.log(result)
    }
  )
...

answered Jul 18, 2021 at 17:01

akuiper

216k33 gold badges362 silver badges379 bronze badges

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

Collectives™ on Stack Overflow

Vue Composition Api - watch property passed to external composition function

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