事件 VueJs 上的道具组件

Question

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

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

还有，如何访问触发 change 事件的 switch 的任何 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')