VueJs 试图获取点击元素的 id 和 value，以便我可以将数据发布到数据库

Posted 2023-02-23

【中文标题】VueJs 试图获取点击元素的 id 和 value，以便我可以将数据发布到数据库

【英文标题】：VueJs trying to get the id and value of clicked element so I can post the data to the database

【发布时间】：2021-07-22 14:59:11

【问题描述】：

我正在尝试使用切换按钮使某些 jobOffers 可见和不可见。 加载页面时，get 请求会从数据库中读取 true 或 false，以决定是否切换了 toggleButton。 我正在尝试获取已单击的孩子的值和 ID，以便我可以向数据库发送请求，让它知道它例如从“不可见”变为“可见”（下次加载页面时） .

我尝试了多种方法，但我不认为我完全理解它是如何工作的？所以我有一个父页面/组件：

<template>
  <div class="container">
    <header>
      <navigation-bar role="COMPANY"/>
    </header>

    <main>
      <section class="page-menu">
        <CompanyPageSelectorMenu/>
      </section>

      <section class="job-offers" v-if="jobOffers">
        <div class="scroll" id="scrollbar-styling" v-for="jobOffer of jobOffers" :key="jobOffer.id">
          <CompanyJobOfferList :functionBold="jobOffer.jobFunction" :amount-per-session="jobOffer.amountPerSession" :functionDescription="jobOffer.jobDescription" :isChecked="jobOffer.visible"/>
      </div>
      </section>


    </main>
  </div>
</template>

<script>
  import CompanyPageSelectorMenu from "../components/CompanyPageSelectorMenu.vue";
  import NavigationBar from "../components/NavigationBar";
  import CompanyJobOfferList from "../components/CompanyJobOfferList";
  import axios from 'axios';
  import Utils from "../assets/utils"

export default 
name: "CompanyJobOffer",
  components: NavigationBar, CompanyPageSelectorMenu, CompanyJobOfferList,
  data () 
    return 
      jobOffers: [],
      errors: [],
    
  ,
  created() 
    let userId = Utils.parseJwt(Utils.getCookie("JWT-token")).userId;

    axios.get(`http://localhost:8080/joboffers/` + userId, 
      headers: 
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': `Bearer $Utils.getCookie("JWT-token")`
      
    )
        .then(response => 
          this.jobOffers = response.data
        )
        .catch(e => 
          this.errors.push(e)
        )
  

</script>

在父级中它使用一个组件：

<CompanyJobOfferList :functionBold="jobOffer.jobFunction" :amount-per-session="jobOffer.amountPerSession" :functionDescription="jobOffer.jobDescription" :isChecked="jobOffer.visible"/>

子组件如下：

<template>
  <div class="container">
    <div class="wrap-text">
      <span class="function-text-bold"><b> functionBold </b></span>
      <span class="function-text"> functionDescription </span>
    </div>
    <div class="wrap-text">
      <span class="amount-text">Aantal toegelaten studenten per sessie</span>
      <div class="click-amount">
        <button class="remove-hover"><svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-12v-2h12v2z"/></svg></button>
        <span class="function-text"> amountPerSession </span>
        <button class="remove-hover"><svg xmlns="http://www.w3.org/2000/svg"   viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z"/></svg></button>
      </div>
    </div>
    <button>Stel je tijdslot in</button>
    <!-- Rounded switch -->
    <label class="switch">
      <!-- <input type="checkbox" v-model="this.isChecked" v-on:click="!this.isChecked">-->
      <!-- <input type="checkbox" v-model="isChecked"-->
        <input type="checkbox" v-if="isChecked" checked="isChecked">
       <input type="checkbox" v-else>
      <span class="slider round"></span>
    </label>
    <hr>
  </div>
</template>

<script>


//import axios from "axios";
export default 
  name: "CompanyJobOfferList",
  data() 
    return ;
  ,
  props: 
    functionBold: 
      type: String,
      required: true,
    ,
    functionDescription: 
      type: String,
      required: true,
    ,
    amountPerSession: 
      type: Number,
      required: true,
    ,
    isChecked: 
      type: Boolean,
      required: true,
    ,
  ,
;
</script>

如何获取被点击组件的 ID？如果我知道点击了哪个组件，我需要它的当前值吗？您是在子组件还是在父组件中发出 post/put 请求。为什么要在父组件或子组件中制作它？我的第一个想法是将数据发送给父级，因为父级制作了多个子组件？我尝试了各种不同的选项，但都无法正常工作。

【参考方案1】：

您应该使用$emit。 将事件和 id 传递给子组件并在按钮单击时调用方法。 父组件：

<CompanyJobOfferList @buttonClicked="handleClick" :id="jobOffer.id">

向父组件添加方法：

handleClick(arg) 
  // do whatver using arg

子组件按钮

<button @click="$emit('buttonClicked', id)"></button>

子组件道具

props: 
  id: 
    type: ?,
    required: true