• 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 month ago (09-11) 167 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 >
 Return return {data() {data() {return {showscore: false, ԡcorecolumns: [
 {values: [], / / needs to dynamically set the column of integer columns, 
 defaultindex: 0 𠃱
}, 
 
 
 defaultindex: 0 ԡ 
 
 
, 
 
 showscore: false,, 𠃱
 corecolumns:: [
 
 
 
 
 
 
 / / you need to dynamically set the column of integer columns of 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() {
 / / code is for display only, 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 
 (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); Showscore = true; / / select pop-up window for displaying score

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 
 
 
 showscorepop() {
 / / the code is only for display, and some codes have been omitted. The following variable maxscore is the maximum value dynamically obtained dynamically, which may be 10 or 30 
 / / this.scorecolumns [0], values = [];;; 
 letnumarr = []; 
 for (let I = maxscore; I > = 0; I > = 0; I --) {for (let I = maxscore; I > = 0; I > = I --) {
 / / this.scorecolumns [0], values.values.push (I); 
 numarr.push (I);;; 
;; 
;; 
 
 
 
 
 
 
 
 
for (let let I = maxscore; I > = 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 render update picker view - https://www.barben.cn/code/880.html
Like it( six )
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 (required)
  • website