Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

how to use select2 component into vue project | Vue | Sass| metronics-8 | demo2


How to use select2 component into own project. I am using metronic theme-demo2 with vuejs.
Below both code are not working:

<select

 class="form-select form-select-solid"

 v-model="data.age"

 >

 <option></option>

 <option value="10">10</option>

 <option value="15">15</option>

 <option value="20">20</option>

 <option value="25">25</option>

 <option value="30">30</option>

 <option value="65">Age 65</option>

 <option value="75">Age 75</option>

 <option value="100">Age 100</option>

 </select>



 <!--begin::Input-->

 <div>

 <el-select

 class="form-select-solid"

 placeholder="Select option"

 v-model="data.status"

 >

 <el-option label="Approved" value="1">Approved</el-option>

 <el-option label="Pending" value="2">Pending</el-option>

 <el-option label="In Process" value="3">In Process</el-option>

 <el-option label="Rejected" value="4">Rejected</el-option>

 </el-select>

 </div>

 <!--end::Input-->


Note: unable to post screenshot with questions


user
Abhishek Singh 4 years ago
Vue HTML
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Lauris Stepanovs Author 4 years ago

Hi,<br><br>

Since the select2 plugin requires jQuery it is not included in the Vue version.<br><br>

As an alternative, you can use the Multiselect plugin or Element Plus select components.<br>
Vue Mulitiselect<br>
Element Plus<br>


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(