Question

我有动态表，我从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

Answer 1

您的数据中似乎已经定义了name, client_id, redirectUrl, id，但您也可以在agr上将其作为属性。在这种情况下，您不需要将任何内容传递给editRedirect，只需使用您的数据属性。

$.ajax({
    ...
    data: {
        name: this.name,
        client_id: this.client_id,
        redirectUrl: this.redirectUrl,
        id: this.id,
    },
    ...
})

或者

$.ajax({
    ...
    data: {
        name: this.agr.name,
        client_id: this.agr.client_id,
        redirectUrl: this.agr.redirectUrl,
        id: this.agr.id,
    },
    ...
})

如果您要使用v-for循环来迭代某些表行，那么只需将当前项传递给editRedirect。

<tr v-for="item in stuff>
  <td>
      <button @click="editRedirect(item)">Edit</button>
  </td>
</tr>

然后在你的方法中使用

$.ajax({
    ...
    data: {
        name: item.name,
        client_id: item.client_id,
        redirectUrl: item.redirectUrl,
        id: item.id,
    },
    ...
})

我发现您正在使用contenteditable但我不知道使用v-model对此有什么好的支持。你最好使用输入或textareas。然后在你的表格单元格中你就可以做到这一点。

<tr v-for="item in stuff>
  <td><input type="text" v-model="item.name"></td>
  <td><input type="text" v-model="item.client_id"></td>
  <td><input type="text" v-model="item.url"></td>
  <td>
      <button @click="editRedirect(item)">Edit</button>
  </td>
</tr>

允许您更新值。

如何使用vue获取所选文本？

1 个答案: