VueJs试图获取单击元素的id和值，这样我就可以将数据发布到数据库中。

Question

我正试图用一个jobOffers来使toggleButton可见和不可见。加载页面时，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" width="20" height="20" 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" width="20" height="20" 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请求。为什么要在父组件或子组件中实现？我的第一个想法是将数据发送给父级，因为父级生成多个子组件？我尝试了各种不同的选择，但都没能让它发挥作用。

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