事件 VueJs 上的道具组件

Question

我正在尝试在最后一次触发事件时访问组件的道具。此组件来自 http://element.eleme.io/#/en-US/component/switch.

它有name、value等几个props。我希望能够在触发更改时获取开关的名称或值。

更重要的是，如何访问触发更改事件的开关的任何道具？

我试过了，但我没有定义。

 <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/

谢谢

解决方案

<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

试试

@change="changeSwitch"

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

那会给你价值。

该组件将（可能）使用

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

将名称作为唯一参数传递给绑定的 "change" 事件处理程序。

如果你想要 name 通过 props 传递，我怀疑它会改变所以只需在你的 Vue 实例/组件中保存对它的引用，例如

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

并使用

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

然后您可以随时通过 this.name 访问它。

Answer 2

<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')

事件 VueJs 上的道具组件

Props component on event VueJs

javascript

vue.js

vuejs2

解决方案