Select2 form input not change value with vue - laravel

Question

i need help. So basicly, when i used ordinary select form, i have succeed pass the data. but when i change to select2. Why my select2 not change value like select2 form??
This is with my select form ordinary with success pass data
<template>
<div class="col-md-3 col-sm-4">
<div class="filter-sidebar">
<div class="col-md-12 form-title">
<h2>Find the OPD</h2>
</div>
<form id="search" role="form" class="" #submit.stop.prevent="searchOpdForm" method="post">
<div class="col-md-12 form-group category">
<label class="control-label" for="category">Instansi / OPD</label>
<select id="opd" name="opd" class="form-control" v-model="selectopd.opd">
<option v-for="opd in opds" :key="opd.index" :value="opd.id">{{opd.nama_opd}}</option>
</select>
</div>
<div class="col-md-12 form-group button">
<button type="submit" class="btn tp-btn-primary tp-btn-lg btn-block">Cari</button>
<router-link :to="{name: 'listings'}" class="btn btn-reset"><i class="fa fa-repeat"></i>Reset</router-link>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios'
import {API_BASE} from '../Config/config'
export default {
name: 'Sidebar',
data() {
return {
opds: [],
selectopd: {}
}
},
created() {
this.fetchOpds();
},
methods: {
searchOpdForm() {
let urlpost = `${API_BASE}/listings/search/opd`
console.log('submiting')
axios.post(urlpost, this.selectopd)
.then(response => {
this.$router.push({name: 'searchlistingopd', params: {listings: response.data.listings}})
console.log('successful')
})
.catch(error => {
console.log(error)
})
},
fetchOpds() {
let url = `${API_BASE}/get-opds`
axios.get(url)
.then(response => {
this.opds = response.data.opds
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
And this is with example selected id's :
And if i changes to this, and a bit search with select2 form format, and my code is like this
<template>
<div class="col-md-3 col-sm-4">
<div class="filter-sidebar">
<div class="col-md-12 form-title">
<h2>Find the OPD</h2>
</div>
<form id="search" role="form" class="" #submit.stop.prevent="searchOpdForm" method="post">
<div class="col-md-12 form-group category">
<label class="control-label" for="category">Instansi / OPD</label>
<select id="opd" name="opd" class="form-control" v-model="selectopd.opd">
<option v-for="opd in opds" :key="opd.index" :value="opd.id">{{opd.nama_opd}}</option>
</select>
</div>
<div class="col-md-12 form-group button">
<button type="submit" class="btn tp-btn-primary tp-btn-lg btn-block">Cari</button>
<router-link :to="{name: 'listings'}" class="btn btn-reset"><i class="fa fa-repeat"></i>Reset</router-link>
</div>
</form>
</div>
</div>
</template>
<script>
import axios from 'axios'
import {API_BASE} from '../Config/config'
import jQuery from 'jquery'
let $ = jQuery
require('select2')
export default {
name: 'Sidebar',
data() {
return {
opds: [],
selectopd: {}
}
},
created() {
this.fetchOpds();
},
mounted() {
$("#opd").select2()
},
methods: {
searchOpdForm() {
let urlpost = `${API_BASE}/listings/search/opd`
console.log('submiting')
axios.post(urlpost, this.selectopd)
.then(response => {
this.$router.push({name: 'searchlistingopd', params: {listings: response.data.listings}})
console.log('successful')
})
.catch(error => {
console.log(error)
})
},
fetchOpds() {
let url = `${API_BASE}/get-opds`
axios.get(url)
.then(response => {
this.opds = response.data.opds
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
Now when i choose value, it doesn't change anything. Just like this
Am I doing wrong with select2 code to use it in my component? Or i missing something to add like native jquery in ordinary?

Answer 1

You could change
<select id="opd" name="opd" class="form-control" v-model="selectopd.opd">
for
<select id="opd" name="opd" class="form-control" v-model="selectopd">