vue - select 选项更改触发 vuex 变异错误

Question

我正在使用 vue2。我想在 v-for

中获取 select 选项对象

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

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

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

顺便说一句，如何从 select v-for 选项

中获取对象

谢谢

Answer 1

首先，我认为您没有必要使用 @change。 v-model 应该足以处理所选的选项。这是一个示例 fiddle：https://jsfiddle.net/z11fe07p/567/

只要您拥有 :value 和 v-model 等整个对象，您就始终拥有选定的选项及其 ID。

vue - select 选项更改触发 vuex 变异错误

vue - select option change triggers vuex mutation error

select

vuejs2

vue.js

vuex