VueJs 试图获取点击元素的 id 和值，这样我就可以 post 将数据存入数据库

Question

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

我尝试了多种方法，但我不明白它是如何工作的？所以我有一个父 page/component:

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

VueJs 试图获取点击元素的 id 和值，这样我就可以 post 将数据存入数据库

VueJs trying to get the id and value of clicked element so I can post the data to the database

javascript

request

vue.js

vue-component

axios