0

I've passed down state object as a prop and while I can change arrays to pass down to mutator to overwrite whole object on property change, I can't do so on property literals.

The documentation warns that I should be able to change arrays/objects, yet I can't modify object.prop = "string". I also don't understand why it is that I can actually change arrays of state object that is meant to be immutable. There're workarounds to changing props that are literals, but than they're out of sync with original prop. I'd be happy to see another efficient solution to making forms for changing state object properties.

<div id="skillListing" class="ui item" @change="resetSkill">
  <input :value="filter.name" placeholder="edit me">

  props: [
    "filter",
    "fIndex",
    "gIndex"
  ],
  methods: {
    resetSkill () {
      console.log(this.filter.name) //won't change
       this.$store.commit('upsert_skill', {o: this.filter, f: this.fIndex, g: this.gIndex})
    }
  }
zhan
  • 31
  • 1
  • 1
  • 4
  • Reason why I got this code is that even handler doesn't specify target key. Using v-for for all properties doesn't allow you to specify form type: checkbox/input – zhan Feb 04 '17 at 21:43
  • I suppose that rendering component with key for item that dynamically renders the right input type depending on prop would work, but it still won't help much in way of literals. – zhan Feb 05 '17 at 16:41
  • Actually dynamic form component, rendered as key in obj, with key as ID should work since event.target.id + event.target.value will get you the key value pair. – zhan Feb 05 '17 at 18:18

1 Answers1

0

From what I understand from your question, if your component is only an input field, you can use v-model to pass props.

v-model is essentially syntax sugar for updating data on user input events.

<input v-model="something">

is just syntactic sugar for:

<input v-bind:value="something" v-on:input="something = $event.target.value">

You can pass a prop : value in the child components, and on change of input field call following which will change the filter.name variable.

this.$emit('input', newVal)

This is how you will use your component:

<your-component v-model="filter.name"></your-component>

You can have a look at one implementation using this approach here.

tony19
  • 125,647
  • 18
  • 229
  • 307
Saurabh
  • 71,488
  • 40
  • 181
  • 244
  • The title reads Vuex object forms, so I'm trying to commit "bunch" of properties to event handler and also overwrite object in batch. V-model is that workaround that I said I don't like as it will ignore prop original. – zhan Feb 05 '17 at 13:57
  • @zhan Than also, you can instead of doing `this.$emit` use `this.$dispatch`, which will change the vuex store. – Saurabh Feb 05 '17 at 13:59
  • Any chance you know how to read original object key from even handler? @Saurabh any chance I could extract key of prop being modified? – zhan Feb 05 '17 at 14:08
  • @zhan I am not sure what you are trying to say, can you create a [fiddle](https://fiddle.jshell.net/mimani/y9ftm5wc/) with your issue. – Saurabh Feb 05 '17 at 14:54
  • Ultimately the problem is that if I do event delegation then I can't tell where the value that I get from event target belongs. If you can't put that and whats happening above together than you won't help. – zhan Feb 05 '17 at 15:45