CODEWITHSUNDEEP
vue.jsvuejs3vue-props
Non404
Non404

Reputation: 1293

Vue 3 emit prop

I'm trying to pass an emit prop in VUE 3, every time I pass it I still get false, and prop fails to toggle.

Accordion.vue

 <template>
    <div class="flex" @click="toggleInfo()">
        <slot></slot>
    </div>
 </template
    <script>
    export default {
      props: {
        value: {
          required: true
        }
      },
      setup(props, { emit }) {
        const toggleInfo = () => {
          emit('input', !props.value)
        }
        return {
          toggleInfo
        }
      }
    }
    </script>

App.vue

<accordion v-model:value="isOpen">
    ...// just data
</accordion>

<script>
import { ref } from 'vue'
import accordion from '../components/Accordion.vue'

export default {
  components: {
    accordion
  },
  setup() {
    const isOpen = ref(false)
    return {
      isOpen
    }
  }
}
</script>

Every time I click on toggleInfo, I still get :

false

my emit isn't working.

Upvotes: 5

Views: 9833

Answers (1)

tony19
tony19

Reputation: 138286

The v-model wiring has changed in Vue 3:

  • component's prop name
    • Vue 2: value
    • Vue 3: modelValue
  • component's emitted event name
    • Vue 2: input
    • Vue 3: update:modelValue

Since value is technically a custom v-model prop name, you have to adjust the emitted event name to match:

// emit('input', !props.value) ❌ wrong event name
emit('update:value', !props.value)

demo

Upvotes: 13

Related Questions