Vue js獲取存儲在div中的隱藏輸入的單個值

Question

Wassup民間，

我想要存儲在我的 div 中的隱藏輸入的各個值，即帶有值的“卡片”。 我添加了一個 onclick 事件，它觸發了 sendData() 方法。 目前我總是得到值“1”，似乎 vue 無法區分單個 div。 我必須編輯什么才能讓它工作？

"card.vue" (...)

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;" @click="sendData(3)">
      <div class="card-header">3 Points</div>
      <div class="card-body">
        <h5 class="card-title">
          <input type="number" value="3" id="cardValue" hidden />
        </h5>
        <p class="card-text">Some explanation.</p>
      </div>
    </div>

    <div class="card text-white bg-primary mb-3" style="max-width: 18rem;" @click="sendData()">
      <div class="card-header">2 Points</div>
      <div class="card-body">
        <h5 class="card-title">
          <input type="number" value="2"  ref="cardValue" id="cardValue" hidden />
        </h5>
        <p class="card-text">Some explanation.</p>
      </div>
    </div>

    <div class="card text-white bg-primary mb-3" style="max-width: 18rem;" @click="sendData()">
      <div class="card-header">1 Points</div>
      <div class="card-body">
        <h5 class="card-title">
          <input type="number" value="1" ref="cardValue" id="cardValue" hidden />
        </h5>
        <p class="card-text">Some explanation.</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      output: "",
      roomNumber: "",
      roomName: "",
      currentUsers: "",
      userValue: "",
      playerComment: "Enter a reason...",
      updatedAt: ""
    };
  },
  created() {
    axios
      .get("/public/api/getPlayerInfo/" + this.$route.params.currentRoom)
      .then(response => {
        this.output = response.data;

        this.roomNumber = response.data.currentRoom.id;
        this.roomName = response.data.currentRoom.roomName;
        this.updatedAt = response.data.currentRoom.updated_at;

        this.currentUsers = response.data.currentUsers;
        this.userValue = response.data.currentUsers[1].pivot.userValue;

        console.log(this.currentUsers);
        console.log(this.userValue);
      })
      .catch(e => {
        console.log(e);
      });
  },
  computed: {},
  methods: {
    sendData() {
      const updatedCardValue = this.$refs.cardValue.value;
      this.userValue = updatedCardValue;
      axios
        .post("/public/values/" + this.$route.params.currentRoom, {
          _method: "put",
          userValue: this.userValue
        })
        .then(response => {
          console.log(response);
        })
        .catch(error => console.log(error));
    }
  }
};
</script>

Answer 1

使裁判獨一無二

更改 onclick 以發送參考值

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;" @click="sendData('ref1')">
  <div class="card-header">2 Points</div>
  <div class="card-body">
    <h5 class="card-title">
      <input type="number" value="2"  ref="ref1" id="cardValue" hidden />
    </h5>
    <p class="card-text">Some explanation.</p>
  </div>
</div>

更改代碼以使用發送的引用值

methods: {
  sendData(ref) {
    const updatedCardValue = this.$refs[ref]value;