이벤트 VueJs의 소품 컴포넌트

이벤트 VueJs의 소품 컴포넌트

마지막으로 이벤트가 발생했을 때 컴포넌트의 소품에 접근하려고 합니다.이 컴포넌트는 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')

간단하게 시험해 보세요.

@change="changeSwitch"

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

그것이 당신에게 가치를 줄 것입니다.

컴포넌트는 (아마)

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

이 명령어는 바인드된 "변경" 이벤트핸들러에 이름을 유일한 인수로서 전달합니다.

---

필요한 경우name소품을 통해 전달될 때, 나는 그것이 바뀌는 것이 의심스럽기 때문에, 그것을 참조할 수 있는 것을 저장해 두기만 하면 됩니다.Vue인스턴스/컴포넌트(예:

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

및 사용

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

그러면 언제든지 다음 방법으로 액세스 할 수 있습니다.this.name.

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

언급URL : https://stackoverflow.com/questions/41949437/props-component-on-event-vuejs