I was learning the UI source code of ele.me. When you see the radio and checkbox components. To see what Vue does with checkbox. I don"t understand how that piece of code works. I hope you can help me with the answer. Thank you
.: ` +
`v-model is not supported on this element type. ` +
"If you are working with contenteditable, it\"s recommended to " +
"wrap a library dedicated for that purpose inside a custom component."
)
}
// ensure runtime directive metadata
return true
}
// checkbox
function genCheckboxModel (
el: ASTElement,
value: string,
modifiers: ?ASTModifiers
) {
const number = modifiers && modifiers.number
const valueBinding = getBindingAttr(el, "value") || "null"
const trueValueBinding = getBindingAttr(el, "true-value") || "true"
const falseValueBinding = getBindingAttr(el, "false-value") || "false"
addProp(el, "checked",
`Array.isArray(${value})` +
`?_i(${value},${valueBinding})>-1` + (
trueValueBinding === "true"
? `:(${value})`
: `:_q(${value},${trueValueBinding})`
)
)
addHandler(el, "change",
`var $$a=${value},` +
"$$el=$event.target," +
`$$c=$$el.checked?(${trueValueBinding}):(${falseValueBinding});` +
"if(Array.isArray($$a)){" +
`var $$v=${number ? "_n(" + valueBinding + ")" : valueBinding},` +
"$$i=_i($$a,$$v);" +
`if($$el.checked){$$i<0&&(${genAssignmentCode(value, "$$a.concat([$$v])")})}` +
`else{$$i>-1&&(${genAssignmentCode(value, "$$a.slice(0,$$i).concat($$a.slice($$i+1))")})}` +
`}else{${genAssignmentCode(value, "$$c")}}`,
null, true
)
}
I read it in vue.esm.js. At that time, I was watching the components of ele.me Ui while writing the components myself, and then I looked at the source code and didn"t understand how this piece was handled. I wanted someone to help me explain how the model here was called. I debugged the value of v-model in genCheckboxModel and how to add checked, but I didn"t see how to call this model.