CODEWITHSUNDEEP
vue.jsvue-componentvuejs3
aulia amirullah
aulia amirullah

Reputation: 196

The Value of Variables does not update inside components

When I put the input field inside a component, it doesn't update the value by any means. Is there something I've missed? Btw, I use Vue 3.

Child Component (input-form.vue)

    <template>
      <input
        type="text"
        :value="searchField"
        @input="$emit('update:searchField', $event.target.value)"
      />
      <p>Text Inside: {{ searchField }}</p>
    </template>
    
    <script>
    export default {
      emits: ["update:searchField"],
      props: {
        searchField: {
          type: String,
        },
      },
    };
    </script>

Parent

    <template>
      <div>
        <input-form :searchField="searchField" />
        <p>Text Outside: {{ searchField }}</p>
      </div>
    </template>
    
    <script>
    import inputForm from "components/input-form.vue";
    export default {
      data() {
        return {
          searchField: "",
        };
      },
      components: {
        inputForm,
      },
    };
    </script>

Upvotes: 0

Views: 78

Answers (1)

Michal Lev&#253;
Michal Lev&#253;

Reputation: 37753

You are not listening for the update:searchField event in the Parent.

<input-form :searchField="searchField" @update:searchField="searchField = $event" />

or

<input-form v-model:searchField="searchField" />

Upvotes: 3

Related Questions