VueJS

Question

VueディレクティブにSwitchery iOS 7をラップしようとしていますが、これまでは成功していませんでした。私を助ける誰か？

コードfiddleがあります。

JS

Vue.directive('plSwitchery', { 
    twoWay: true, 

    deep: true, 

    params: [], 

    bind: function() { 

    var self = this, 
     value = self.value, 
     el = self.el; 

    el.checked = true; 

    new Switchery(el); 

    $(el).on('change', function(a) { 
     value = !value; 
     self.set(value); 
     alert(self.value); 
    }); 

    }, 
    update: function(value) { 
    window.console.log('directive update'); 
    }, 
    unbind: function() { 
    this.el.destroy(); 
    } 
}); 

var vm = new Vue({ 
    el: '#app', 
    data: { 
    selected: 1, 
    }, 
    methods: { 
    onChange: function() { 
     alert('Do HTTP request'); 
    } 
    } 
}); 

HTML

<div id="app"> 

    <input type="checkbox" v-pl-switchery="selected" /> 

</div> 

...今、私は私の選択したデータを更新し、どのようにする方法を知っておく必要があるので、私はそれを包むことができ、それが部分的に取り組んでいますユーザーがサーバーを呼び出してデータベースの情報を更新するためにchangeイベントをトリガーすると、メソッドonChangeを呼び出します。

私は本当にそれに対処する方法はありません！

ありがとうございます！

Answer 1

実際に簡単な第二のアプローチとなるだろう私はSwitcheryプラグインをあきらめ、私は自分のコンポーネントを作った！

私の解決策があります。

JS

Vue.component('plSwitch', { 
    template: '#ck', 
    props: { 
    model: { 
     default() { 
     return false 
     } 
    }, 
    text: { 
     default() { 
     return; 
     } 
    }, 
    disabled: { 
     default() { 
     return false 
     } 
    } 
    }, 
    methods: { 
    onChange() { 
     console.log('oi') 
     vm.$dispatch('onChange') 
    } 
    } 
}) 

var vm = new Vue({ 
    el: '#add', 
    data: { 
    state: true 
    }, 
    events: { 
    onChange: function() { 
     alert('Do HTTP request'); 
    } 
    } 
}) 

CSS

.label_switch { 
    display: inline-block; 
    margin: 0; 
    cursor: pointer; 
    font-weight: normal; 
    position: relative; 
} 
.label_switch input[type="checkbox"] { 
    position: absolute; 
    -webkit-appearance: none; 
    appearance: none; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 100%; 
    margin: 0; 
    opacity: 0; 
    cursor: pointer; 
} 
.label_switch input[type="checkbox"] + span { 
    display: inline-block; 
    width: 38px; 
    height: 18px; 
    position: relative; 
} 
.label_switch input[type="checkbox"] + span:before { 
    content: ""; 
    display: block; 
    width: 38px; 
    height: 22px; 
    border-radius: 20px; 
    border: 1px solid #dfdfdf; 
    -webkit-transition: all 0.1s ease-out; 
    transition: all 0.1s ease-out; 
} 
.label_switch:hover input[type="checkbox"] + span:before { 
    box-shadow: inset 0 0 15px #eee; 
} 
.label_switch input[type="checkbox"] + span:after { 
    content: ""; 
    position: absolute; 
    top: 0px; 
    left: 0; 
    display: block; 
    width: 22px; 
    height: 22px; 
    -webkit-transition: all 0.3s ease-out; 
    transition: all 0.3s ease-out; 
    background: #fff; 
    border-radius: 20px; 
    border: solid 1px #dfdfdf; 
    box-shadow: 2px 1px 1px -2px rgba(0, 0, 0, 0.4) 
} 
.label_switch input[type="checkbox"]:checked + span:after { 
    left: 18px; 
    border: solid 1px #5FBEAA; 
    box-shadow: none; 
} 
.label_switch input[type="checkbox"]:checked + span:before, 
.label_switch input[type="checkbox"]:disabled:checked + span:before { 
    border: 1px solid #5FBEAA; 
    background-color: #5FBEAA; 
} 
.label_switch:hover input[type="checkbox"]:checked + span:before { 
    box-shadow: none; 
} 
.label_switch input[type="checkbox"]:disabled + span { 
    opacity: 0.6; 
} 
.label_switch input[type="checkbox"]:disabled + span:before { 
    background-color: #f7f7f7; 
} 
.label_switch input[type="checkbox"]:disabled + span:after { 
    background-color: #f3f3f3; 
} 
.label_switch input[type="checkbox"]:disabled + span:after { 
    background-color: #fff; 
} 
.label_switch input[type="checkbox"]:disabled + span:before, 
.label_switch input[type="checkbox"]:disabled + span:after { 
    cursor: no-drop; 
} 
.label_switch input[type="checkbox"]:disabled:checked + span:before {} .m-r-5 { 
    margin-right: 5px !important; 
} 
.m-l-5 { 
    margin-left: 5px !important; 
} 
.disabled { 
    cursor: no-drop!important; 
} 

HTML

<template id="ck"> 
    <label class="label_switch" :class="{ 'disabled' : disabled }"> 
    <input type="checkbox" v-model="model" :false-value="false" :true-value="true" :disabled="disabled" @click="onChange()"> 
    <span :class="{ 'm-r-5': text != '' }"></span> {{ text }} 
    </label> 
</template> 

<div id="add"> 
    <pre>{{ $data | json }}</pre> 
    <pl-switch :model.sync="state" text="Example"></pl-switch> 
</div> 

私はあなたがあなたたちは思いを知ってみよう！

Answer 2

速い方法は：this.vm.onChange()ですが、それは親コンポーネントがその名前でメソッドを持つことを否定し、そのディレクティブの再利用性を制限します。

単にコンポーネントに時計を作成し、多分watch:へmethods:からonChange funcitonを動かすことであろうもう一つの方法：

watch: { 
    'selected': function() { 
    alert('Do HTTP request'); 
    } 
} 

番目のオプションは$ディレクティブからコンポーネントにイベントを発するには次のようになります。あなたの状況については

// in the directive 
this.vm.$emit('swicth-changed',value) 

//if you have different switches you can name them with the directive argument: 

// v-pl-switchery:name="selected" 

this.vm.$emit('switch-changed',this.arg,value) // this.arg gives you the 'name' 

<input type="checkbox" v-pl-switchery="selected" @switch-changed="onChange"/> 

私は