Question

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

我在表中有一系列复选框。并且我添加了一个代码段以选择shift + click的多个复选框。这样，我可以一次选择许多复选框。

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

和方法

  onModifyClick () {
    console.log("testing");
    this.$notify({
      group: "admins",
      title: "Please",
      type: "error",
      text: "At least select one user!",
    });
  }

在“修改”上单击“我要获取所有在页面上选中的复选框。.然后我要获取已添加为attrs的值

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

我想遍历所有选中的复选框并获取这些数据属性，

这更像是一个信息性问题，因为我已经搜索了但找不到任何解决方案。

更新：

我正在使用Vuetable，并且通过在回调formatter中加载Vuetable来获取所有这些值

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"
  }
]

现在，我看不到。做您建议将其放入数据中的操作，然后让Vue通过模板将其附加到dom。而数据已经通过Vuetable绑定到Dom。

那之后我只有这个

Answer 1

对于新的SPA框架用户来说，这很常见，因此您正要向后进行此操作。使用Vue时，您需要摆脱直接接触DOM的习惯-与其思考“我拥有这些复选框，我需要从中读取值”，不如考虑“我拥有这些状态变量”在我的组件中，vue会自动在DOM中反映这些值。”操作组件data，让Vue担心DOM。

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

new Vue({
  el: '#app',
  data: {
    myCheckboxes: [{
        val: 11172,
        username: 'junaid@evercam.io',
        apiId: 'dddd',
        apiKey: 'xxxx',
        checked: false
      },
      {
        val: 123,
        username: 'foo@example.com',
        apiId: 'dddd',
        apiKey: 'xxxx',
        checked: true
      },
      {
        val: 456,
        username: 'bar@example.com',
        apiId: 'dddd',
        apiKey: 'xxxx',
        checked: true
      }
    ]
  },
  methods: {
    onModifyClick() {
      // Examine the data, not the DOM:
      var ret = this.myCheckboxes.map(x => {
        if (x.checked) return x.val
      }).filter(x => {return x})
      console.log("Values of checked items: ", ret)
    }
  }
});

<script src="https://unpkg.com/vue@latest/dist/vue.min.js"></script>
<div id="app">
  <template v-for="box in myCheckboxes">
    <input @change="onModifyClick()" type="checkbox" v-model="box.checked" :data-val="box.val" :data-val-username="box.username" :data-val-api-id="box.apiId" :data-val-api_key="box.apiKey"> {{box.username}}<br>
</template>
</div>

如您所见，您尝试使用jQuery手动进行的大多数操作现在都会自动发生-在任何时候，您都可以仅检查组件data的内容以查看“ myCheckboxes”的状态列表，您永远不会从DOM中读取任何内容，也永远不会直接写入DOM，只需更改data的内容，然后让Vue处理其余的内容。

在Vue，React或Angular等框架中，DOM是副作用，而不是jQuery代码中惯用的事实来源。我强烈建议不要与Vue一起使用jQuery，至少要等到您对框架了解得足够多，才能知道何时安全和有必要这样做（不经常）。

Answer 2

您可以利用getAttribute元素函数的优势，该函数返回作为参数传递的属性的值，因此我们添加了change事件的方法处理程序，该方法将事件作为参数，我们可以访问{通过调用target方法来表示当前元素（复选框输入）的{1}}属性：

getAttribute

new Vue({
  el: '#app',
  data: {

  },
  methods: {
    onModifyClick(e) {
    let t=e.target;
      console.log(t.getAttribute('data-val'));
      console.log(t.getAttribute('data-val-username'));
      console.log(t.getAttribute('data-val-api-id'));
      console.log(t.getAttribute('data-val-api_key'));
    }
  }
});

在VueJS中处理复选框

2 个答案: