我在电子Vue中有一个应用程序。它建立在 nodejs 之上。我在我的应用程序中添加了 izimodal,它可以正常工作和显示。但我不能使用v-model
and @click="dntok"
。这意味着我无法获得按钮事件也无法绑定文本框。如何在文本字段中获取按钮事件和文本。
let jquerys = require("../assets/js/jquery-3.2.1.min.js");
var izm = require("../assets/js/iziModal.js");
export default {
name: "modaltemplate",
data: () => ({
btKey: "",
btSecret: "",
}),
created() {
this.initialize();
},
methods: {
initialize(){
$("#btxconfigs").iziModal({
title: 'Bittrex Configs',
headerColor: '#88A0B9',
theme: 'light',
rtl: false,
width: 600,
radius: 3,
zindex: 999,
autoOpen: 0, // Boolean, Number
bodyOverflow: false,
transitionIn: 'comingIn',
transitionOut: 'fadeOutLeft',
transitionInOverlay: 'fadeIn',
transitionOutOverlay: 'fadeOut',
});
},
openModal(){
$('#btxconfigs').iziModal('open');
},
dntok(){
console.log("Button Clicked. value : "+this.btKey+" - "+ this.btSecret);
},
}
}
@import '../assets/css/style.min.css';
@import '../assets/css/iziModal.css';
<button @click="openModal" >Click here to Open</button>
<div id="btxconfigs" class="iziModal setting-modal">
<div class="row">
<form class="col s12">
<div class="bluesection">
<div class="input-field col s12">
<input type="text" v-model="btKey" class="blues-input" placeholder="Api Key">
</div>
<div class="input-field col s12">
<input type="text" v-model="btSecret" class="blues-input" placeholder="Api Secrete">
</div>
<div class="bittrex-modal-footer izi-modalfooter">
<button type="button" class="btn btns no-border white-text blue-gradient waves-effect waves-light btn-skip izimodal-btn" data-dismiss="modal">Skip</button>
<button type="button" id="btsavebtn" @click="dntok" class="btn btns no-border white-text blue-gradient waves-effect waves-light btn-savenext izimodal-btn">Save & Next</button>
</div>
</div>
</form>
</div>
</div>