One requirement is to use the picker selector component of vant instead of the input box to set everyone's score.
However, each item has a different score. Some have a full score of 10 points and some have a full score of 30 points. Therefore, it is necessary to dynamically change the selectable range for the picker selector.

 <!--  Score selection pop-up --> <van-popup v-model="showScore" position="bottom" :lazy-render='false'> <van-picker show-toolbar Title="Score selection" :columns="scoreColumns" @cancel="showScore = false" /> </van-popup>

 data() { return { showScore: false, scoreColumns: [ { Values: [],//The integer column needs to be set dynamically defaultIndex: 0 }, { values: ['.'], defaultIndex: 0 }, { values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], defaultIndex: 0 }, { values: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9], defaultIndex: 0 } ] } }, methods: { showScorePopup() { //The code is for display only, and some codes have been omitted. The following variable maxScore is the maximum value obtained dynamically, which may be 10 or 30 this.scoreColumns[0].values = []; //  Clear first and then assign values for(let i = maxScore; i >= 0; i --) { //Add all scores to the first column of picker after traversing, for example: [30, 29, 28,..., 2, 1, 0] this.scoreColumns[0].values.push(i); } this.showScore = true;  //  Display score selection pop-up window } }

Modifying the columns parameter of the picker will not update the view

At first, the values in scoreColumns [0] were directly modified (as shown above). The values were indeed modified into a new array, but the options in the selector did not change.
So the first reaction is that it is the pot for updating the view, so we use Api and Vue provided by Vue$ Set. The result is that the data is still modified, but the options are not updated.
Next, I checked Vant's official documents and found that there was a picker.setColumnValues This picker obviously obtains the selector instance, but this picker is a parameter only available for the @ change event on the van picker component, and it does not exist in other events.
The setColumnValues method is to set the options of the specified column in the selector.

When I couldn't get the selector, I suddenly found a sentence I ignored in the document:

Use ref to obtain the picker component

 <van-picker ref="scoreSelect" />

 console.log(this.$refs.scoreSelect);

As shown above, First, add a ref attribute to the picker component, and then use this$ Refs calls it.
However, you will find that the console relentlessly outputs an undefined, which is a lonely???

Solve that the picker component cannot be obtained by using ref in the popup

The popup layer is not rendered to the page in advance before it is opened (the popup is not loaded when the dom is loaded), so ref cannot get the picker selector in it.
The solution is Add a lazy render parameter to the popup component, so you can use $refs to obtain it.

 <van-popup :lazy-render="false" />

So I changed the showScorePopup method at the beginning of the article to this

 //The instance method scoreSelect receives two parameters (columnIndex, values). The first parameter is the index of the column to be modified by the selector, and the second parameter is the value to be modified showScorePopup() { //The code is for display only, and some codes have been omitted. The following variable maxScore is the maximum value obtained dynamically, which may be 10 or 30 // this.scoreColumns[0].values = []; let numArr  = []; for(let i = maxScore; i >= 0; i --) { // this.scoreColumns[0].values.push(i); numArr.push(i); } // this.$ refs.scoreSelect.setColumnValues(0,  this.scoreColumns[0].values); this.$ refs.scoreSelect.setColumnValues(0, numArr); this.showScore = true; //  Display score selection pop-up window }