• Welcome to the eight year blog, I'm glad to meet you at the right age!
  • Due to the theme, QQ login partners will display the default avatar in the comments. Please go to the personal center and upload the avatar again.

Van re rendering updates picker view

Code Notes barben One year ago (September 11, 2020) 3688 views 0 comments

One requirement is to use van's picker selector component instead of the input box to set everyone's score.
However, the score of each item is different, some full score is 10, some full score is 30, so it is necessary to dynamically change the optional range for picker selector.

 The Vue van picker selector dynamically updates the view

 <!--  Score selection pop up window -- > <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: [], / / columns for which integers need 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 part of the code has been omitted. The variable maxscore below 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 fractions 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 picker's columns parameter does not update the view

At first, the values in scorecolumns [0] were directly modified (as shown above). The values were indeed changed to a new array, but the options in the selector did not change.
Therefore, the first reaction is to update the view pot, so the API, Vue. $set provided by Vue is used. The result is that the data is still modified, but the options are not updated.
Next, I looked at the van official documents and found that there was one picker.setColumnValues This picker obviously obtains the selector instance, but this picker is a parameter only available to the @ change event on the van picker component, and there is no such parameter in other events.
The setcolumnvalues method is to set the options of the column specified by the selector.

 Van official document for picker view update

When I couldn't get the selector, I suddenly found a sentence in the document that was ignored by me

 Instance method and ref acquisition of van picker

Use ref to get picker components

 <van-picker ref="scoreSelect" />
 console.log(this.$refs.scoreSelect);

As shown above, First add a ref attribute to the picker component, and then call it in the method using this. $refs.
However, you will find that the console mercilessly output an undefined, which is to get a lonely???

Solve the problem of using ref in the pop-up to get picker components

The pop-up layer is not rendered to the page before it is opened (pop is not loaded when DOM is loaded), so ref cannot get picker selectors in it.
The solution is Add a lazy render parameter to the pop component so that you can use $refs to get it.

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

So I changed the showscorepopup method at the beginning of the article to look like 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 part of the code has been omitted. The variable maxscore below 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 }

 Lazy render ahead of time rendering of van pop pop


Eight blogs that year, we've been there all the time
If the author does not indicate the original article, please indicate the link and source of this article
Van re rendering updates picker view- https://www.barben.cn/code/880.html
Like it( seven )
Post my comments
Cancel comment
expression Mapping Bold Strikethrough Center Italics

You need to bring your nickname and email with you in the year of eight!

  • Nickname (required)
  • Email address (required)
  • website