CODEWITHSUNDEEP
vue.js
user1012181
user1012181

Reputation: 8726

Vue.js Methods inside the slot is not working

It seems like the methods and data are not working inside the slot. What if we need to use the component methods inside a slot of the component?

<template id="child-template">
  <slot name="form">
  </slot>
</template>

<div id="events-example">
  <child>
    <div slot="form">
      <input :value="msg">
      <button v-on:click="notify">Dispatch Event</button>
    </div>
  </child>
</div>

and in the js

// register child, which dispatches an event with
// the current message
Vue.component('child', {
  template: '#child-template',
  data: function () {
    return { msg: 'hello' }
  },
  methods: {
    notify: function () {
      alert('ok');
    }
  }
})

var parent = new Vue({
  el: '#events-example'
})

https://jsfiddle.net/ffsojvw4/

Upvotes: 3

Views: 5929

Answers (1)

pespantelis
pespantelis

Reputation: 15372

The methods and data which you want to use on slots, should be bound to the parent's scope.

You could read more here.

https://jsfiddle.net/pespantelis/ffsojvw4/1/

Upvotes: 2

Related Questions