Как очищать все поля формы поиска, кроме одного?

Question

[Иван Симонов]

Добрый день
Есть код - https://codesandbox.io/s/charming-bogdan-9i3t9l

На странице есть 2 формы поиска,
Например, в компоненте Footer Search - введен какой текст для поиска
затем при вводе нового текста в компоненте Header Search - как очищать поле с текстом в компоненте Footer Search, кроме текущего?

Answer 1

[WiF Azapro]

По .CLASS или #ID

Answer 2

[nvdfxx]

// Header/Footer
  async searchData() {
        this.$emit("input", {data: this.searchCards, ref: 'header'});
  },

// App
  methods: {
    searchData({data, ref}) {
      this.search = data;
      this.resetInputs(ref)
    },
    resetInputs(ref) {
      const refs = ['header', 'footer'],
        refsToReset = refs.filter(e => e !== ref)
      refsToReset.forEach(e => this.$refs[e].searchCards = '')
    }
  }

Answer 3

[0xD34F]

Сделать observable объект, содержащий ссылку на экземпляр компонента, в котором последний раз осуществлялся пользовательский ввод. Установить наблюдение за этой ссылкой, и если значение не совпадает с текущим экземпляром - сбрасывать значение input'а:

const lastEdited = Vue.observable({ instance: null });

props: [ 'value' ],
methods: {
  onInput(e) {
    this.$emit('input', e.target.value);
    lastEdited.instance = this;
  },
},
created() {
  this.$watch(() => lastEdited.instance, val => {
    if (val && val !== this) {
      this.$emit('input', '');
    }
  });
},
beforeDestroy() {
  if (lastEdited.instance === this) {
    lastEdited.instance = null;
  }
},

<input :value="value" @input="onInput">

https://jsfiddle.net/jLw096zm/

Или можно шину событий применить. Если случилось изменение input'а пользователем, кидать событие, в качестве аргумента передавать ссылку на экземпляр компонента, в обработчике сравнивать значение аргумента и this, если не совпали - очищать input:

const eventBus = new Vue();

props: [ 'value' ],
methods: {
  onInput(e) {
    this.$emit('input', e.target.value);
    eventBus.$emit('clear-other-inputs', this);
  },
},
created() {
  const clear = e => e !== this && this.$emit('input', '');
  eventBus.$on('clear-other-inputs', clear);
  this.$on('hook:beforeDestroy', () => eventBus.$off('clear-other-inputs', clear));
},

<input :value="value" @input="onInput">

https://jsfiddle.net/jLw096zm/1/