Блог

Главная - Вопросы по программированию - Сохранить выбранные значения ввода, несмотря на переключение между двумя компонентами в VUEJS

Сохранить выбранные значения ввода, несмотря на переключение между двумя компонентами в VUEJS

#vue.js

#vue.js

Вопрос:

Итак, у меня есть два компонента, которые импортируются в мое приложение.vue:

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

Эти компоненты вызываются, когда я нажимаю на соответствующую кнопку. Все это работает нормально.

Но в компонентах у меня есть несколько полей ввода, таких как в 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>

Здесь я могу выбрать, какое событие смотреть. Но после переключения на Comp2, а затем снова выбора Comp1, selectedEvent пусто. Очевидно, потому что он определен пустым data .

Есть ли какой-либо способ сохранить выбранное значение в переменной сеанса или вы предпочитаете другой метод?

Пользовательский интерфейс выглядит следующим образом:Пользовательский интерфейс

Комментарии:

1. можете ли вы также добавить скриншот вашего пользовательского интерфейса?

2. Вы можете использовать local storage для сохранения выбранного вами значения, или вы также можете использовать vuex библиотеку для поддержания состояния.

3. Вы также можете использовать a keep-alive для своих компонентов, чтобы запомнить их последнее состояние, подробнее здесь: vuejs.org/v2/guide /…

4. @TobiasSchnier — если вы создаете форму, подобную вещи с несколькими страницами, тогда лучше иметь ее в качестве основного объекта в родительском без загрузки вашего клиента [localStorage]

5. Я добавил решение для того же

Ответ №1:

Вы можете сохранить объект в своем родительском объекте, который вы можете передать в качестве реквизита реквизиту, а затем выполнить двустороннее рукопожатие

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

а затем передайте этот formInputs вашему дочернему компоненту, откуда
вы можете вносить изменения всякий раз, когда вы обновляете ввод внутри этого

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

Используя приведенный выше пример для первого компонента, вы можете реализовать то же самое и для второго компонента

Ответ №2:

вы можете добавить наблюдателя на selectedEvent, а затем сохранить данные в хранилище vuex

Метки: