javascript - When using the multi-select box component of vue+ElementUI, I encountered problems. What is the reason?

Question

When using ElementUI's radio button and multi-select box components, using v-for loop rendering, there is no response when clicking on the selection box, but the bound data can be changed correctly.
The code for binding data is as follows:

<el-checkbox-group v-model="questions[now_page-1].value" v-if="questions[now_page-1].type=='checkbox'">
    <p v-for='item in questions[now_page-1].options'>
        <el-checkbox :label="item.value"></el-checkbox>
    </p>
</el-checkbox-group>

where questions[now_page-1].value is an array. There is no problem with page rendering. That is, after clicking the multi-select box, the multi-select box does not become selected, but at this time questions[now_page-1].value does. Obtained the value of the option just clicked

Has anyone encountered this situation? Please explain in detail the solution and the reason for this problem

Answer 1

It may be due to the array. JS arrays cannot achieve two-way binding, so the array data has changed but the component has not detected it

Answer 2

Why el-checkbox要放到p里面？去掉p, 把v-for放到el-checkboxabove