Question

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

它有几个道具，如名称，价值等。我希望能够在触发更改时获取开关的名称或值。

更重要的是，如何访问触发更改事件的交换机的任何道具？

我尝试了这个，但我没有定义。

 <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，我怀疑它会发生变化，所以只需在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上的道具组件

解决方案

2 个答案: