Как использовать v-model и value в одном input?

Question

[nastya_zholudeva]

Есть

<input type="search" placeholder="Поиск" class="search__input" v-model="search" @keyup.enter="onSearchLineChanged(search)">

который по событию onSearchLineChanged(search) отправляет значение search в state (Vuex). В другой компоненте по клику этот search заменяется в state на другое значение.
Так вот мне нужно, чтобы когда это значение заменилось (при помощи клика во второй компоненте), оно стало value. для этого инпута

Answer 1

[0xD34F]

В компонентах делайте watch на значение из vuex, как-то так (да, вместо разных компонентов несколько экземпляра одного, но, думаю, суть понятна):

watch: {
  '$store.state.search'(val) {
    this.search = val;
  },
},

Answer 2

[Александр Аксентьев]

Ну так и ставьте моделью геттер из стейта.

Comments

[nastya_zholudeva]

Александр Аксентьев, а как мне динамически получать значение этого инпута, т.к. ниже есть кнопка, по клику на которую также как и на onSearchLineChanged(search) нужно отправлять значение инпута

[Александр Аксентьев]

nastya_zholudeva, заведите стейт search.
Везде где он используется используйте геттеры стейта.
Везде где он изменяется используйте мутации(или экшены) для его изменения.

На выходе у вас везде все будет всегда синхронизировано и в актуальном состоянии.

В этом вся суть стейта в приложении.