单击该单元格时如何获取单元格值？

Question

当用户单击 table 单元格时，Vue 应该知道它的值。在这种情况下，我试图设置一个事件并传递值。

有什么方法可以让我写得更好，也许来自 Vue 本身——例如，当单元格被点击时首先获取它的内容？我在 table 中有很多单元格，这不起作用，只有当我删除 PHP 部分并尝试手动编写时它才有效 - @click="calculate_price(10)

<?php foreach ($tr as $td) : ?>
    <td @click="calculate_price(<?php echo $td['price']; ?>)">
        <?php echo $td['price']; ?>
    </td>
<?php endforeach; ?>


var app = new Vue({
    el: '#app',
    data: {
        price: 0
    },
    methods: {
        calculate_price: function (price) {
            console.log(price);
        }
    }
})

Vue 版本为 2.4.2

Answer 1

您可以将点击事件绑定到 <table> 并从 event 中获取最深的元素，以查看点击了哪个 <td> 以及其中的值。

看到这个fiddle：https://jsfiddle.net/at0sdhsh/

单击该单元格时如何获取单元格值？

How to get cell value when that cell is clicked?

vue.js

vuejs2