vueを使用して選択した​​のテキストを取得するには？

Question

DBから$ .ajax（）でデータを取得する動的テーブルがあります。行のデータは編集可能で、同じコンテンツの変更をvue.jsで保存する必要があります。コンテンツを変更した後、4つのパラメータ（name、client_id、url、およびid）を持つ$ .ajax（）関数がこれに対してトリガされます。私は入力の価値+データベースのIDを得る方法を見つけようとしています。私はjqueryでコードを持っていますが、私はそれをさらにVue-ishにする必要があります。これどうやってするの？

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コードである。ここ

テーブルのHTMLです。ボタンのクリックで成功しますが、パラメータは未定義に戻ります。基本的には編集可能な行の$.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-のループを持ってしようとしている場合は、単に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を使用して、そのための任意の良いサポートを知らない参照してください。あなたは入力やテキストエリアを使う方が良いでしょう。あなたのテーブルのセルでこれを行うことができます。

<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> 

これにより、値を更新することができます。