Element ui drop-down box custom property binding

problem description

on a form submission page, there is a drop-down box, and the options in the drop-down box are the values passed from the parent component, prop: ["academicRule"];

now, you want the drop-down box to show the selected text, both the value of the category property, but the score box below needs to be automatically bound to the score property value of the above selected item;

my way of writing

define score as a custom property, bind;

@ changge binding event,

related codes

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

error

error: academicRule is not defined

because: academicRule is the value of the prop attribute, I don"t know how to change it. Ask for advice

Nov.01,2021

is going in the wrong direction. You can't get index for the change event. You can write
@ change= "currentSel (index)" and change it to @ change= "currentSel"

.
currentSel(value) {
  const rule = this.academicRule.find(item => item.category === value);
  this.academicForm.academicScore = rule.score;
},
Menu