Как добавить новый пункт через форму на vue?

Question

[svilkov87]

Добрый день!

Есть текстовое поле textarea и список ul>li под ним. Предполагается, что при нажатии Enter, ul должен обновиться новым элементом li, со значением, которое было отправлено из текстового поля.

Часть этого реализовано, но не могу понять, как обновить массив в store.list.
Оставил коммент по сути проблемы непосредственно в коде
Там есть vuex - так нужно.

Спасибо.

Answer 1

[0xD34F]

К textarea цепляете v-model, чтобы введённый текст был доступен как свойство компонента. При нажатии enter вызываете мутацию хранилища.

Похоже на то, что вам нужно?

<div id="app">
  <textarea
    v-model="title"
    @keydown.enter.prevent
    @keyup.enter="addItem"
  ></textarea>
  <ul>
    <li v-for="n in $store.state.items">{{ n.title }}</li>
  </ul>
</div>

const store = new Vuex.Store({
  state: {
    items: Array.from('abcd', n => ({ title: n.repeat(3) })),
  },
  mutations: {
    addItem: (state, item) => state.items.push(item),
  },
});

new Vue({
  el: '#app',
  store,
  data: () => ({
    title: '',
  }),
  methods: {
    addItem() {
      const title = this.title.trim();
      if (title) {
        this.$store.commit('addItem', { title });
        this.title = '';
      }
    },
  },
});

Comments

[svilkov87]

Ну, вобщем, да. Но мне почему-то казалось, что все проще гораздо.
Спасибо.

[0xD34F]

Оно и так просто - v-model. Остальные изменения - это исправление всяких разных косяков (типа неподключенного хранилища или обновления его стейта напрямую).