Javascript 在VueJS中处理复选框

过去我一直在使用jQuery，现在我切换到Vuejs。我无法在Vuejs中找到这些问题的解决方案，我是Vuejs的新手

我在一张桌子上有一系列的复选框。我还添加了一个片段，用shift+单击来选择多个复选框。这样我就可以一次选中许多复选框

$chkboxes = $('.chkbox')
lastChecked = null
$chkboxes.click (e) ->

if !lastChecked
    lastChecked = this
    return

if e.shiftKey
    start = $chkboxes.index(this)
    end = $chkboxes.index(lastChecked)
    $chkboxes.slice(Math.min(start, end), Math.max(start, end) + 1).prop 'checked', lastChecked.checked
    lastChecked = this
    return

单击后，我可以从复选框中获取作为数据属性添加的值

$("#cameras_datatables tbody input[type='checkbox']:checked").each (index, control) ->
  camera_id = $(control).attr("data-val-id")
  api_id = $(control).attr("data-val-api-id")
  api_key = $(control).attr("data-val-api_key")
  row = $(this).parents('tr')

现在我有一个按钮，比如

<button v-on:click="onModifyClick" class="clear-btn-f" id="btn-modify">Modify</button>

在“修改”按钮上，单击“我想获取第页上选中的所有复选框”。。然后我想得到作为属性添加的值

<input type="checkbox" data-val="11172" data-val-username="junaid@evercam.io" data-val-api-id="dddd" data-val-api_key="dddd">

现在，我看没有办法了。要执行您建议的操作，请将其放入数据中，并让Vue通过模板将其附加到dom。而数据已经通过Vuetable绑定到Dom

之后我只有这个

---

对于新的SPA框架用户来说，这是很常见的，您完全是在倒退。在使用Vue时，您需要改掉直接接触DOM的习惯——不要认为我有这些复选框，我需要从中读取值——应该是我的组件中有这些状态变量，Vue将自动在DOM中反映这些值。操纵组件数据，让Vue担心DOM

因此，例如，与其使用jQuery在DOM中搜索复选框元素并读取/写入它们的属性，不如使用Vue存储这些值，并让其模板将它们绘制到DOM中，如本简化示例所示：

新Vue{ el:“应用程序”， 数据：{ 我的复选框：[{ 瓦尔：11172， 用户名：'junaid@evercam.io', APID:'dddd'， apiKey:'xxxx'， 勾选：假 }, { 瓦尔：123， 用户名：'foo@example.com', APID:'dddd'， apiKey:'xxxx'， 核对：正确 }, { 瓦尔：456， 用户名：'bar@example.com', APID:'dddd'， apiKey:'xxxx'， 核对：正确 } ] }, 方法：{ onModifyClick{ //检查数据，而不是DOM： var ret=this.mycheckbox.mapx=>{ 如果x.checked返回x.val }.filterx=>{return x} console.Log已检查项目的值：，ret } } }; {{box.username}

---

您可以利用getAttribute元素函数，该函数返回作为参数传递的属性的值，因此我们添加了以事件为参数的change event的方法处理程序，我们可以通过调用getAttribute方法访问表示当前元素复选框输入的目标属性，如下所示：

新Vue{ el:“应用程序”， 数据：{ }, 方法：{ onModifyClicke{ 设t=e.target； console.logt.getAttribute'data-val'； console.logt.getAttribute'data-val-username'； console.logt.getAttribute'data-val-api-id'； console.logt.getAttribute'data-val-api_key'； } } }; 1. 2.

---

你的回答很好，但这里有一个小问题。我使用的是vuetable，在vuetable中加载数据后得到这些值。。我只有一个办法。将这些值放入Dom。。我在我的问题中再次解释，看起来您误用了vuetable的格式化程序；不是使用它来输出HTML字符串，而是使该表单元格及其在Vue中的必要操作从当前提供给格式化程序的相同数据工作。如果您需要vuetable库的具体帮助，最好单独提问。是的，我认为我已经走到了死胡同，因为没有人愿意帮助，我过去曾发布过一个关于它的问题，甚至在回购协议上也没有人回答。我明白您的意思，但使用vuejs有什么解决我目前的问题的方法吗？只有获取这些数据？抱歉，我肯定不是人们不愿意帮助，只是vuetable没有广泛使用，所以人们可能不知道。我上面链接的回购协议的例子看起来很简单，但是它展示了如何使用一个单元格。当你不能回答时，这很好-1：我的问题是有效的。有人知道如何选择多个复选框吗？

<input type="checkbox" data-val="11172" data-val-username="junaid@evercam.io" data-val-api-id="dddd" data-val-api_key="dddd">

export default [
  {
    title: ``,
    formatter: (value) => {
      return "<input type='checkbox' data-val='" + value.id + "' data-val-username='" + value.username +  "' data-val-api-id='" + value.api_id + "' data-val-api_key='" + value.api_key + "'>";
    },
    titleClass: "user-checkbox"
  }
]