element ui下拉框自定义属性绑定

Question

我的写法

将score定义成一个自定义属性，绑定；

@changge绑定事件，

相关代码

• template代码：

        <!-- 职务级别 -->
      <el-form-item label="学会职务级别" prop="academicLevel">
        <el-select v-model="academicForm.academicLevel" 
        placeholder="请选择职务级别" 
        @change="currentSel(index)">
          <el-option v-for="(item, index) in academicRule" 
          :key="index" 
          :label="item.category" 
          :value="item.category" 
          :data-score="item.score">
          </el-option>
        </el-select>
      </el-form-item>

      <!-- 奖项分数 -->
      <el-form-item label="分数" prop="academicScore" v-show="false">
        <el-input v-model="academicForm.academicScore" placeholder="请输入论文分数">
        </el-input>
      </el-form-item>

• script 代码

methods: {
    currentSel(index,value) {     console.log(academicRule[index]['score']);     this.academicForm.academicScore = this.academicForm.academicLevel;
    },

错误

报错：academicRule is not defined

因为：academicRule是prop属性的值，不知道如何改。。。求教

Answer 1

方向错了，change事件你拿不到index的，可以这样写@change="currentSel(index)"改成@change="currentSel"currentSel(value) {  const rule = this.academicRule.find(item => item.category === value);  this.academicForm.academicScore = rule.score; },