时间戳

首页 > 解决方案 > 如何使用动态 ID 值获取 ElementByID？

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

问题描述

我getElementById对动态 ID 有疑问。我需要这个值来随机计算不同的元素。

我的代码

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

标签： javascripthtmlvue.js

解决方案

在Vue中，您不需要获取每个元素的 id 来设置其 HTML 内容，只需将其值绑定如下：

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>

推荐阅读