如何在 Vue.js 方法中使用 jquery 访问表数据

Question

这是我在 laravel 刀片文件

中的基本表格

每个编辑按钮点击时都会调用一个vue方法

 <types-page inline-template>
   <div>
                <!-- table -->
                <table id="choose-address-table" class="ui-widget ui-widget-content">
                    <thead>
                    <tr class="ui-widget-header ">
                        <th>Name/Nr.</th>
                        <th>Street</th>
                        <th>Town</th>
                        <th>Postcode</th>
                        <th>Country</th>
                        <th>Options</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td class="nr"><span>50</span>
                        </td>
                        <td>Some Street 1</td>
                        <td>Glasgow</td>
                        <td>G0 0XX</td>
                        <td>United Kingdom</td>
                        <td>
                            <button type="button" @click="edit()">edit</button>
                        </td>
                    </tr>
                    <tr>
                        <td class="nr">49</td>
                        <td>Some Street 2</td>
                        <td>Glasgow</td>
                        <td>G0 0XX</td>
                        <td>United Kingdom</td>
                        <td>
                            <button type="button" @click="edit()">edit</button>
                        </td>
                    </tr>
                    </tbody>
                </table>
   </div>
 </types-page>

这里是vue组件

它处理 edit() 方法。该方法触发正常，因为我测试过

我正在尝试使用 jquery 来选择数据并记录硬编码表中的每一行

我希望能够访问日志每一行中的数据

它的 jquery 选择器似乎无法以表为目标

<script>
export default {
    name: "types-page",
    data() {
        return {
            typeError: false
        }
    },
    methods: {
        edit() {

            var $row = $(this).closest("tr");    // Find the row
            var $text = $row.find(".nr").text(); // Find the text

            console.log($text)
        }
    }
}
</script>

当我运行单击此方法时，控制台日志只是空白。

提前感谢帮助我的人

Answer 1

您已经在使用Vuejs 为什么不使用Vuejs 提供的数据绑定。不要使用Jquery，使用v-for 生成表格，然后在每个按钮上将数据传递给您需要的方法。如果这样做了，你就不需要再用Jquery找到它了。

在JSFiddle 上创建了示例。

我已经做了一个例子来生成你想要的更简单的版本。对每一行使用 v-for 并将地址数据传递给edit() 函数。

<div id="app">
    <table id="choose-address-table" class="ui-widget ui-widget-content">
    <thead>
        <tr class="ui-widget-header ">
            <th>Name/Nr.</th>
            <th>Street</th>
        </tr>
   </thead>
   <tbody>
       <tr v-for="address in addresses" :key="address.street + address.number">
           <td>
               {{ address.number}}
           </td>
           <td>
               {{ address.street}}
           </td>
           <td>
             <button type="button" @click="edit(address)">edit</button>
           </td>
       </tr>
   </tbody>
</div>

Vuejs 我在其中制作了一些示例数据。

new Vue({
  el: "#app",
  data: {
    addresses: [
      { street: "Pensylvania avenue", number: 1 },
      { street: "Pensylvania avenue", number: 2 },
      { street: "Pensylvania avenue", number: 3 },
    ]
  },
  methods: {
    edit: function(address){
        console.log(address);
    }
  }
})

Answer 2

我不是 vue.js 专家，但根据您的要求，这可能会让您开始：

var example1 = new Vue({
  el: '#choose-address-table',
  data: {
  //  return {
  //    typeError: false
  //  }
  },
  methods: {
    edit: function(event) {
      console.log('here');
      var t = event.target;
      console.log("what e:", event.target);
      var $row = $(t).closest("tr"); // Find the row
      var $text = $row.find(".nr").text(); // Find the text
      console.log($text);
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<types-page inline-template>
  <div>
    <!-- table -->
    <table id="choose-address-table" class="ui-widget ui-widget-content">
      <thead>
        <tr class="ui-widget-header ">
          <th>Name/Nr.</th>
          <th>Street</th>
          <th>Town</th>
          <th>Postcode</th>
          <th>Country</th>
          <th>Options</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="nr"><span>50</span>
          </td>
          <td>Some Street 1</td>
          <td>Glasgow</td>
          <td>G0 0XX</td>
          <td>United Kingdom</td>
          <td>
            <button type="button" @click="edit">edit</button>
          </td>
        </tr>
        <tr>
          <td class="nr">49</td>
          <td>Some Street 2</td>
          <td>Glasgow</td>
          <td>G0 0XX</td>
          <td>United Kingdom</td>
          <td>
            <button type="button" @click="edit">edit</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</types-page>