Question

我已经将状态对象传递给了prop，虽然我可以更改数组以传递给mutator来覆盖属性更改时的整个对象，但我不能在属性文字中这样做。

文档警告我应该能够更改数组/对象，但我无法修改object.prop =“string”。我也不明白为什么我实际上可以改变状态对象的数组是不可变的。改变文字的道具是有变通方法，但它们与原始道具不同步。我很高兴看到另一种有效的解决方案来制作用于更改状态对象属性的表单。

<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})
    }
  }

Answer 1

根据我的理解，如果你的组件只是一个输入字段，你可以使用v-model传递道具。

v-model本质上是用于更新用户输入事件数据的语法糖。

<input v-model="something">

只是语法糖：

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

您可以在子组件中传递prop：value，然后更改输入字段调用，这将更改filter.name变量。

this.$emit('input', newVal)

这是您使用组件的方式：

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

您可以使用此方法查看一个实现here。

Vuex对象形式：事件委托到子组件prop

1 个答案: