Props component on event VueJs

Question

I'm trying to access a props of a component when this last triggers an event. This component is coming from http://element.eleme.io/#/en-US/component/switch.

It has several props such as name, value and so on. I would like to be able to get the name or the value fo the switch when change is triggered.

Even more, how to access any props of the switch that triggered the change event ?

I tried this but I get undefined.

 <div v-for="organizer in organizers>
     <el-switch @change="changeOrganizers($event.target.name, $event.target.value)" :name="organizer.name">
    </el-switch>
</div>


var Main = {
    data() {
      return {
        value1: true,
      }
    },
    methods : {
        changeSwitch(name) {
      console.log(name)
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

http://jsfiddle.net/2hr6y79h/2/

Thank you

Solution

<div v-for="organizer in organizers>
     <el-switch @change="changeOrganizers()" :name="organizer.name">
    </el-switch>
</div>


var Main = {
    data() {
      return {
        value1: true,
      }
    },
    methods : {
        changeSwitch() {
      console.log(event.currentTarget.checked);
      console.log(event.currentTarget.name)
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Answer 1

<div v-for="organizer in organizers>
     <el-switch @change="changeOrganizers()" :name="organizer.name">
    </el-switch>
</div>


var Main = {
    data() {
      return {
        value1: true,
      }
    },
    methods : {
        changeSwitch() {
      console.log(event.currentTarget.checked);
      console.log(event.currentTarget.name)
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

Answer 2

Simply try

@change="changeSwitch"

http://jsfiddle.net/2hr6y79h/3/

That will give you the value.

The component will (probably) use

this.$emit('change', this.value)

which passes the name as the sole argument to your bound "change" event handler.

---

If you want the name as passed via props, I doubt it changes so just save a reference to it in your Vue instance / component, eg

data () {
  return {
    value1: true,
    name: 'test-name'
  }
}

and use

<el-switch ... :name="name"

Then you can always access it via this.name.