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

Posted 2023-03-14

【中文标题】如何在 Vue.js 方法中使用 jquery 访问表数据

【英文标题】：How to access table data using jquery within Vue.js method

【发布时间】：2021-08-06 04:12:57

【问题描述】：

这是我在 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>

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

提前感谢帮助我的人

【问题讨论】：

你不能把“nr”作为参数传递给edit()，比如@click="edit(49)"，@click="edit(50)"吗？

你没有正确使用vue。几乎不需要将 jquery 与 vue 一起使用，特别是在您的情况下。只需将表的数据存储在对象数组中，使用v-for 构建表，并将每行的索引传递给edit()，如 brombeer 所述

【参考方案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);
    
  
)

【参考方案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>