CODEWITHSUNDEEP
vue.js
TobiasSchnier
TobiasSchnier

Reputation: 80

Save selected values of input despite switching between two components in VUEJS

So I have two components that are imported into my app.vue:

<script>
import Leaderboard from "./components/Comp1.vue";
import Search from "./components/Comp2.vue";
export default {
  name: "App",
  components: {
    Comp1,
    Comp2,
  },
}

These components are called, when I click on the corresponding button. This all works fine.

But in the components I have some input fields such as in Comp1.vue:

<template>
  <div>
<select
   class="form-select"
   name="event"
   id=""
   v-model="selectedEvent"
   >
            <option value="">Please choose an event:</option>
            <option v-for="event in eventsList" :key="event">
              {{ event }}
            </option>
  </select>
  </div>
</template>

<script>
data: function () {
        return {
            selectedEvent: "",
</script>

Here I can choose, which event to watch. But after switching to Comp2 and then again choosing Comp1, the selectedEvent is empty. Obviously, because its defined empty in data.

Is there any way to store the selected value in a session variable or would you prefer a different technique?

UI looks like this:UI

Upvotes: 1

Views: 1074

Answers (2)

David ROSEY
David ROSEY

Reputation: 1805

you can add a watcher on selectedEvent then store the data in vuex store

Upvotes: 0

Amaarockz
Amaarockz

Reputation: 4684

You can maintain an Object in your parent which you can pass as props to a props and then have a two way handshake

<Leaderboard :formInputs="formInputs"></Leaderboard>

<script>
import Leaderboard from "./components/Comp1.vue";
import Search from "./components/Comp2.vue";
export default {
  name: "App",
  components: {
    Comp1,
    Comp2,
  },
  data() {
   return {
    formInputs: {
      compOneInput: '',
      compTwpInput: ''
    }
},
methods: {
  updateData(payload) {
   this.formInputs[payload.key] = payload.value;
 }
}

and then pass this formInputs to your child Component from where you you can emit the change whenever you update the input inside that

<template>
  <div>
<select
   class="form-select"
   name="event"
   id=""
   v-model="selectedEvent"
   >
            <option value="">Please choose an event:</option>
            <option v-for="event in eventsList" :key="event">
              {{ event }}
            </option>
  </select>
  </div>
</template>

<script>
export default {
data: function () {
        return {
            selectedEvent: this.formInputs.compOneInput ? this.formInputs.compOneInput : '',
      }
 },
 watch: {
   formInputs(newVal) {
    this.selectedEvent = newVal.compOneInput;
   },
   selectedEvent(newVal, oldVal) {
    if(newVal !== oldVal) {
      this.$emit('updateData', {key: compOneInput, value: this.selectedEvent});
    }
  }
 }
 props: {
   formInputs: Object
 }
}

</script>

Using the above example for component one , you can implement the same for component two also

Upvotes: 1

Related Questions