Problem with watching prop changes Vue.js

Question

What's the problem

I wanted to assign a local component variable to prop. I constantly get Vue alert Invalid watch handler specified by key "undefined". Maybe the case is that the prop is passed from another component, where I use v-model, but I don't really know. I would really appreciate your help, because my small exercise project really depends on this mechanic.

Parent Component

Here I have some HTML select, this is where I actually model my state.selectedPhysicsModule

<template>
  <div>
    <div>
      <h1>Some header</h1>
    </div>
    <form class="choosePhysicsModule">
      <label for="selectedPhysicsModule"></label>
      <select class="select_Module" id="selectedPhysicsModule" v-model="state.selectedPhysicsModule">
        <option :value="option.value" v-for="(option, index) in importedListToSelect" :key="index">
          {{option.name}}
        </option>
      </select>
    </form>
    <list_of_exercises  v-if="state.selectedPhysicsModule" :what_exercises="state.selectedPhysicsModule"/>
  </div>
</template>

<script>

export default {
  name: 'ChoosePhysicsModule',
  components: {list_of_exercises},
  setup() {
    const state = reactive({
      selectedPhysicsModule: null,
    })
    return {
      state,
      importedListToSelect
    }
  }
}

Child Component

</script>

export default {
    name: "list_of_exercises",
      props: {
        whatExercises: {
          type: String,
          required: true
        }
      },
      data() {
       return {
         exercises: this.what_exercises,
       }
      },
      watch: {
        whatExercises: function () {
          this.exercises = this.whatExercises
        }
       }

You have circular dependency in the watch. Please attach your parent component also so we can help you better. — Ballon Ura
– Ballon Ura, Commented Dec 8, 2020 at 16:03
maybe try adding default: '' to the prop @BallonUra no OP is mutating exercises — Lawrence Cherone
– Lawrence Cherone, Commented Dec 8, 2020 at 16:04
I made some changes, maybe with this broader context you will be able to help me? — Porfinogeneta
– Porfinogeneta, Commented Dec 9, 2020 at 6:36
Do you have some ideas what can I do with this alert? Please help me — Porfinogeneta
– Porfinogeneta, Commented Dec 12, 2020 at 20:08

tony19 · Accepted Answer · 2022-07-16 01:41:51Z

1

In the parent component where you are passing the prop you need to add a setter for the prop passed. Here is an example:

<template>
  <div id="app">
      <label>
          <input name="whatExercises" v-model="whatExercises">
      </label>

      <ListOfExercises v-if="whatExercises" :what_exercises="whatExercises" />
  </div>
</template>

<script>
export default {
    data() {
      return {
          whatExercises: null,
      }
    }
}
</script>

P.S: as a side note, I recommend using camelCase for prop names. It's more in-line with the rest of the community. If you have time feel free to check out the style guide on the official website.

edited Jul 16, 2022 at 1:41

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Dec 8, 2020 at 16:28

hatef

6,29930 gold badges47 silver badges48 bronze badges

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

5 Comments

Porfinogeneta Over a year ago

Hmm, I still get this alert, I made some changes in my post, maybe this will give us broader context on the situation. And of course thank you for sharing this information about community standards.

Porfinogeneta Over a year ago

so what should I do?

hatef Over a year ago

Sorry I couldn't respond earlier. Is you problem already fixed?

Porfinogeneta Over a year ago

Yes, it is. I just changed watch to computed and changed my code a little bit. Maybe you didn't help me directly, but thanks to you I understood what was wrong. Thank you.

geoidesic Over a year ago

Would be better if you showed your actual solution, otherwise this post is useless to anyone else.

Collectives™ on Stack Overflow

Problem with watching prop changes Vue.js

What's the problem

Parent Component

Child Component

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What's the problem

Parent Component

Child Component

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related