vendredi 17 décembre 2021

Vuejs multiple forms different values same method

I have a page with three same forms but with differents dynamic values each. What i want to achive is to take the inputs of the specifiec form when checkbox checked. My work so far is:

<form ref="form">
  <label class="form-check-label">
    <input ref="submit" type="checkbox" value="1" name="question" @click="choiceCheck">
    <input type="text" :value="dynamic feedback 1" name="feedback">
    <input type="number" :value="dynamic points 1" name="points">
    <h2>Dynamic value 1</h2>
  </label>
</form>
<form ref="form">
  <label class="form-check-label">
    <input ref="submit" type="checkbox" value="2" name="question" @click="choiceCheck">
    <input type="text" :value="dynamic feedback 2" name="feedback">
    <input type="number" :value="dynamic points 2" name="points">
    <h2>Dynamic value 2</h2>
  </label>
</form>
<form ref="form">
  <label class="form-check-label">
    <input ref="submit" type="checkbox" value="2" name="question" @click="choiceCheck">
    <input type="text" :value="dynamic feedback 3" name="feedback">
    <input type="number" :value="dynamic points 3" name="points">
    <h2>Dynamic value 3</h2>
  </label>
</form>

And my script

export default {
  data() {
    return {
      inputs: [],
      feedback: "",
      points: "",
    };
  },

  methods: {
    choiceCheck () {
      this.$refs.submit.click()
      console.log(
       this.$refs.form.feedback.value + this.$refs.form.points.value)
    },
  },
};

With this method take always the last form fields, i want when check the checkbox to take form data belong to this checkbox!




Aucun commentaire:

Enregistrer un commentaire