javascript - 如何使用动态 ID 值获取ElementByID？

Question

我在动态 ID 的 getElementById 方面遇到问题。我需要这个值来对不同元素进行随机计算。

我的代码

<div class="col-lg-4" v-for="dado in dados">
  <button class="btn btn-outline-danger" @click="rolagemD20">
      <p>{{dado.nome}}</p>
      <p v-bind:id="dado.nome">?</p>
  </button>
</div>

我的职能:

在这些方法中，我将获取ID并与值进行比较，对每个ID进行不同的计算

<script>
        new Vue({
            el: '#app',
            data: {
                dados: [
                    { nome: 'D4' },
                    { nome: 'D6' },
                    { nome: 'D8' },
                    { nome: 'D10' },
                    { nome: 'D12' },
                    { nome: 'D20' }
                ]
            },
            methods: {
                rolagemD20: function () {
                    var valorAleatorio = Math.floor(Math.random() * 20 + 1)
                    console.log(valorAleatorio)
                    document.getElementsById("").innerHTML = valorAleatorio
                }
            }
        })
    </script>

Answer 1

在Vue中，你不需要获取每个元素的id来设置其HTML内容，只需要绑定(bind)它的值，如下所示:

new Vue({
  el: '#app',
  data: {
    dados: [
      { nome: 'D4', value: '' },
      { nome: 'D6', value: '' },
      { nome: 'D8', value: '' },
      { nome: 'D10', value: '' },
      { nome: 'D12', value: '' },
      { nome: 'D20', value: '' },
    ],
  },
  methods: {
    // getting dado by reference to set his value with "valorAleatorio"
    rolagemD20: function(dado) {
      var valorAleatorio = Math.floor(Math.random() * 20 + 1);
      dado.value = valorAleatorio
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
  <div class="col-lg-4" v-for="dado in dados">
  <button class="btn btn-outline-danger" @click="rolagemD20(dado)">
    <p>{{dado.nome}}</p>
    <p>{{ dado.value }}</p>
  </button>
  </div>
</div>