How to add multiple input values to store in Vue

Question

Trying to add to a store on click from an input. There would be multiple inputs with different parts of an objects info. How can I grab in input data from a method?

In this case, I'm working with packets via a store

<input label="Packet Name" v-model="packets.name"  required><br>
<input label="Packet Name" v-model="packets.folder"  required><br>
<button @click="addPacket">Add</button>

On the addPacket call how do I get the input data?

Full jsfiddle : https://jsfiddle.net/tga9sfcm/1/

Void Ray · Accepted Answer · 2017-08-29 22:28:51Z

1

I added two data props to the app: name and folder.
Changed v-model binding to this two props.
Dispatched an action on button click.

Here is a working fiddle

Also, note that you dispatch Actions and commit Mutations. You had your action dispatching a mutation: store.dispatch('ADD_PACKET', packet)

answered Aug 29, 2017 at 22:28

Void Ray

10.3k4 gold badges35 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add multiple input values to store in Vue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related