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

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

Hi,

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

As an alternative, you can use the Multiselect plugin or Element Plus select components.

Vue Mulitiselect

Element Plus

Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(