Vue js获取存储在div中的隐藏输入的单个值

Posted 2023-03-14

【中文标题】Vue js获取存储在div中的隐藏输入的单个值

【英文标题】：Vue js get individual value of hidden input stored in div

【发布时间】：2020-04-04 12:29:02

【问题描述】：

Wassup 民谣，

我希望将隐藏输入的各个值存储在我的 div 中，即带有值的“卡片”。 我添加了一个触发 sendData() 方法的 onclick 事件。目前我总是得到值“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>

【问题讨论】：

如果你所有的 refs 都是 ref="cardValue" 那么 vue 应该如何知道你想要哪个？

@JaromandaX 是的，我必须在我的方法中编辑什么，才能像这样： const updatedCardValue = this.$ref.nameofelement.value？不想为每个输入编写代码行

您需要唯一的参考作为开始，然后 onclick 可以将参考编号发送到方法 - 就像您使用第一个一样

我该如何写下来？尝试使用 @click="sendData($this.ref)" 没有成功

不，这太复杂了... jsut @click="sendData('blah')" 设置ref="blah" - 只需更改每个块中的参考值...然后sendData(ref) const updatedCardValue = this.$refs[ref].value;

【参考方案1】：

让 ref 独一无二

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

更改代码以使用发送的 ref 值

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