[Vue-V3] Picker in Routable Modals Not Working


#1

I have the following code to create an inline picker in sheet modal

// Vue template
...
<div class="block block-strong no-padding no-margin margin-bottom">
  <div id="demo-picker-container"></div>
</div>

// javascript
this.$f7.picker.create({
  containerEl: '#demo-picker-container',
  inputEl: '#demo-picker-date',
  toolbar: false,
  rotateEffect: true,
  cols: [{
    textAlign: 'center',
    values: ['iPhone 4', 'iPhone 4S', 'iPhone 5', 'iPhone 5S', 'iPhone 6', 'iPhone 6 Plus', 'iPad 2', 'iPad Retina', 'iPad Air', 'iPad mini', 'iPad mini 2', 'iPad mini 3']
  }]
})

The code above works fine in ‘page’ component.
But it displays nothing when I put the code into a sheet modal.

Following is the error message generated:

Uncaught TypeError: Cannot read property 'style' of undefined
  at Dom7.transform (dom7.module.js?6da0:287)
  at Object.updateColItems [as updateItems] (picker-column.js?ba7c:108)
  at Framework7.handleTouchEnd (picker-column.js?ba7c:241)
  at eval (class.js?41ee:86)
  at Array.forEach (<anonymous>)
  at eval (class.js?41ee:85)
  at Array.forEach (<anonymous>)
  at Framework7.emit (class.js?41ee:79)
  at emitAppTouchEvent (touch.js?eeed:513)
  at HTMLDocument.appTouchEndPassive (touch.js?eeed:537)

What should I do to put an inline picker into my sheet modal?


Difference in behavior between inline templates and SFC templates
#2

Can you please share more code or make a more complete JSFiddle with the issue? It is not clear what you are trying to do here


#3

I created a jsfiddle with the issue

https://jsfiddle.net/enylin/1qcm8v50/1/


#4

Because Picker must be created when it is visible. So you need to call its .resizeCols() method on sheet open https://jsfiddle.net/jvkxwy74/