[Framework7-Vue V2] [Fixed] Set default option on Smart Select from Vue?

Questions
1

How can I set this Smart Select so that a predefined value, say 7.7 is selected?

The model binding to vatRate works.

I tried with :selected="condition"but it seemed to have no impact.

Thanks for any hints!

<template>
       <f7-list-item title="Mehrwertsteuer:" smart-select :smart-select-params="{openIn: 'popover', closeOnSelect: true}">
        <select v-model="vatRate" name="Mehrwertsteuer">
          <option value="0">Keine</option>
          <option value="2.5">Reduzierter Satz 2.5 %</option>
          <option value="3.7">Sondersatz 3.7 %</option>
          <option  value="7.7">Normalsatz 7.7 %</option>
        </select>
      </f7-list-item>
 </template>
2

I have created a fiddle to illustrate my issue. Please have a look at https://jsfiddle.net/zoosky/6huc3e7k/

The Smart Select has three options: 1,2,3

Iā€™d like to set the default / starting value to 2, the state stemming from a db or so.

How can this be achieved?

3

I looked at your jsfiddle. mounted needs to be set to a function. e.g.
mounted: function() {
this.optionSelected = 2;
}

2 Likes
4

Thanks @hellohello1

This the solution https://jsfiddle.net/4wfcrxo8/2/

2 Likes
5

But update the this.optionSelected in a timeout to a new value, the select wont change.

mounted:
    function() {
    this.optionSelected = 2;
    setTimeout(() => {
        console.log('------');
        this.optionSelected = 3;
    }, 2000);
}