vue - 选择选项更改触发vuex突变错误

Question

我正在使用vue2。 我想在v-for中选择选项对象

HTML：

       <select
        class="custom-select"
        @change="onPlanSelected($event)"
        v-model="selectedPlan.objectId">
        <option
          v-for="plan in plans"
          :key="plan.objectId"
          :value="plan.objectId">
          {{ plan.title }}
        </option>
      </select>

JS：

data () {
  return {
    selectedPlan: {}
  }
}

onPlanSelected (event) {
  this.selectedPlan = this.plans.find(plan => {
    return plan.objectId === event.target.value
  })
}

当我更改选择选项时，出现错误：

如您所见，selectedPlan是数据而不是vuex。

顺便说一下，如何从select v-for选项中获取对象

由于

Answer 1

首先，我不认为在您的情况下需要使用@change。 v-model应足以处理所选选项。 这是一个示例小提琴：https://jsfiddle.net/z11fe07p/567/

只要您将整个对象设为:value和v-model，您始终拥有所选的选项及其ID。