0
我有三個輸入來插入和保存數據。點擊按鈕時，數據被保存到表格中。我有一個帶有3個參數的$ .ajax（）函數，但我不明白兩個或多個參數如何與Vue.js一起工作。有人可以幫忙嗎？ INPUTS作者vue.js點擊按鈕保存數據到動態表
HTML代碼：TABLE OF
<div class="col-md-12 marg-t-30 nopad">
<!--REGISTER NAME CLIENT ID URL-->
<div class="col-md-1 nopad">
<div class="rtitle">
<div class="roboto-condensed">name</div>
</div>
</div>
<div class="col-md-3 nopad" style="margin-right: 20px;">
<input v-model="name" class="form-control no-border" id="name" type="text" name="nameClient" placeholder="Insert name..." required="">
</div>
<div class="col-md-1 nopad">
<div class="rtitle">
<div class="roboto-condensed">client id</div>
</div>
</div>
<div class="col-md-3 nopad">
<select v-model="client_id" class="form-control no-border selectpicker" name='client_id' id='clientId' data-show-subtext="true" required="">
<?php echo $client_data;?>
</select>
</div>
<div class="col-md-3 nopad">
<button v-on:click='saveRedirect(agr.name, agr.client_id, agr.url)' id="saveButton" class="save float-right">SAVE</button>
</div>
<div class="col-md-12 nopad marg-t-20">
<div class="col-md-1 nopad">
<div class="rtitle">
<div class="roboto-condensed">url</div>
</div>
</div>
<div class="col-md-11 nopad">
<input v-model="url" class="form-control no-border" type="text" id="redirectUrl" name="url" placeholder="http://mobisteinlp/redirect/?id=1" required="">
</div>
</div>
</div><!--col-md-12-->
HTML代碼：
<!--TABLE FOR DATABASE CONTENT-->
<div class="row">
<div class="col-md-12 overflow-table">
<table class="table" id="table">
<thead class="head-color thead-inverse">
<tr>
<th style="border-top-left-radius: 10px; border-left:1px solid transparent;">NAME</th>
<th>CLIENT-ID</th>
<th>URL</th>
<th style="border-top-right-radius: 10px; border-right:1px solid transparent;">ACTIONS</th>
</tr>
</thead>
<tbody id='table-redirect'>
<tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'><!-- v-for to create loop/v-bind to bind data to html -->
<td contenteditable="true">{ agr.name }</td><!--{ data binding } -->
<td>{ agr.client_id }</td>
<td contenteditable="true">{ agr.url }</td>
<td>
<button type="button" class='editButton btn'>
<img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)"><!-- v-on:click event listener to trigger $.ajax() -->
</button>
<a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
<img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)"><!-- button to generate link -->
</a>
</td>
</tr>
<tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'>
<td contenteditable="true">{ agr.name }</td>
<td>{ agr.client_id }</td>
<td contenteditable="true">{ agr.url }</td>
<td>
<button type="button" class='editButton btn'>
<img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)">
</button>
<a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
<img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)">
</a>
</td>
</tr>
<tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'>
<td contenteditable="true">{ agr.name }</td>
<td>{ agr.client_id }</td>
<td contenteditable="true">{ agr.url }</td>
<td>
<button type="button" class='editButton btn'>
<img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)">
</button>
<a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
<img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)">
</a>
</td>
</tr>
</tr>
<tr v-for="agr in agr1" v-bind:key="agr.id" class='lightgrey'>
<td contenteditable="true">{ agr.name }</td>
<td>{ agr.client_id }</td>
<td contenteditable="true">{ agr.url }</td>
<td>
<button type="button" class='editButton btn'>
<img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg" v-on:click="editRedirect(agr)">
</button>
<a href='http://mobisteinlp.com/redirect/public/click.php/?id=<?php echo $id;?>'>
<img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg" v-on:click="doFunction2(agr)">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
JAVASCRIPT：
//VUE.JS REDIRECT PAGE
//VARIABLES
var url = "http://mobisteinlp.com/redirect/redirect";
agr = 0;
//VUE.JS REDIRECT VIEW MODEL
var redirect = new Vue({
el: '#redirect',
delimiters: ["{","}"],
data: {
agr1:[],
agr:[]
},
mounted() {
this.getAll();//DISPLAY TABLE ON PAGE LOAD
},
methods: {
//
getAll: function() {
var self = this;
console.log('test');
$.ajax({
url: url + "/getAll",
type: "POST",
dataType: "json",
success:function(response){
console.log(response);//
self.agr1=response;
console.log(self.agr1);
console.log('success!');
},
error:function(){
console.log('error');
}//end error function
});//end $.ajax() request
},//end getAll function
//FUNCTION TO SAVE DATA ON BUTTON CLICK
saveRedirect: function(name, client_id, url) {
var self = this;
console.log(name);
console.log(client_id);
console.log(url);
var formData = new FormData();
formData.append('name',client_id, url);
$.ajax({
url: url + "/saveRedirect",
type: "POST",
data: {
name: name,
client_id: client_id,
url: url,
},
dataType: "json",
success:function(obj){
console.log(obj);//
this.agr1=obj;
console.log('success!');
},
error:function(){
console.log('error');
}//end error function
});//end saveRedirect $.ajax() function
},//end saveRedirect function
}//end methods
})//end vue.js instance
那麼你就應該提供有關什麼是錯的評論，你如何解決它。 –
所以你保存你想要什麼用戶輸入user.naame，client_id，url在你的按鈕點擊功能，rigjt的價值？ –
到底！我需要名稱輸入，client_id和url輸入的值。 – Timmy