javascript - 事件 VueJs 上的 Prop 组件

Question

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

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

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

我试过了，但我得到了 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/

谢谢

解决方案

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

这会给你带来值(value)。

组件将(可能)使用

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

它将名称作为唯一参数传递给绑定(bind)的“更改” 事件处理程序。

---

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

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

和使用

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

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