我有动态表,我从DB获取$ .ajax()的数据 . 行中的数据是可编辑的,我需要使用vue.js保存相同内容的更改 . 更改内容后,会为此触发带有4个参数(name,client_id,url和id)的$ .ajax()函数 . 我正在尝试找到一种方法来获取输入的值作为数据库的id . 我在jquery中有代码,但我需要让它更像Vue-ish . 我怎样才能做到这一点?
这是表格的HTML:
HTML:
<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 class='lightgrey'>
<!-- v-for to create loop / v-bind to bind data to html -->
<td class="name1" contenteditable="true">{ agr.name }</td><!--{ data binding } -->
<td class="client_id1">{ agr.client_id }</td>
<td class="url1" contenteditable="true">{ agr.url }</td>
<td>
<input id='hidden' name='hidden' type='hidden' value="<?php echo $value->id;?>"> <button v-on:click="editRedirect(name, client_id, url, id)" class='editButton btn' type="button">
<img class="col-md-2 edit nopad float-right" src="http://mobisteinlp.com/redirect/public/img/edit.svg"><!-- v-on:click event listener to trigger $.ajax() -->
</button>
<a href='http://mobisteinlp.com/redirect/public/click.php/?id=%3C?php%20echo%20$id;?%3E'>
<img class="col-md-2 link nopad float-right" src="http://mobisteinlp.com/redirect/public/img/copy.svg"><!-- button to generate link -->
</a>
</td>
</tr>
</tbody>
这是我目前的VUE.JS代码 . 它在按钮单击时成功,但参数返回undefined . 基本上我需要获得可编辑行的 $.text()
.
VUE.JS:
//VARIABLES
var link = "http://mobisteinlp.com/redirect/redirect";
agr = 0;
//VUE.JS REDIRECT VIEW MODEL
var redirect = new Vue({
el: '#redirect',
delimiters: ["{", "}"],
data: {
agr1: [],
agr: [],
name: '',
client_id: '',
redirectUrl: '',
id: ''
},
methods: {
//FUNCTION TO EDIT DATA FROM TABLE
editRedirect: function(name, client_id, redirectUrl, id) {
var self = this;
console.log(name);
console.log(client_id);
console.log(redirectUrl);
console.log(id);
var formData = new FormData();
formData.append('name', client_id, redirectUrl, id);
$.ajax({
url: link + "/editRedirect",
type: "POST",
data: {
name: name,
client_id: client_id,
redirectUrl: redirectUrl,
id: id,
},
dataType: "json",
success: function(obj) {
console.log(obj); //
this.agr1 = obj;
console.log('success!');
},
error: function() {
console.log('error');
} //end error function
}); //end editRedirect $.ajax() function
}, //end editRedirect function
} //end methods
}) //end vue.js instance
1 回答
您的数据中似乎已经定义了
name, client_id, redirectUrl, id
,但您也可以在agr
上将这些属性作为属性 . 在这种情况下,您不需要将任何内容传递给editRedirect
,只需使用您的数据属性即可 .要么
如果您要使用v-for循环来迭代某些表行,那么只需将当前项传递给
editRedirect
.然后在你的方法中使用
我看到你正在使用
contenteditable
但我不知道有什么好的支持使用v-model
. 你最好使用输入或textareas . 然后在你的表格单元格中你可以做到这一点 .这将允许您更新值 .