Select2表单输入不使用vue更改值

Question

我需要帮助。因此，基本上，当我使用普通选择格式时，我已经成功传递了数据。但是当我更改为select2时。为什么我的select2不能像select2形式那样更改值？

这是我选择的具有成功通过数据的普通表单

<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>

这是示例选定的ID：

如果我更改为此选项，并用select2表单格式进行一点搜索，我的代码就是这样

<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>

现在，当我选择值时，它什么都不会改变。就是这样

使用select2代码在组件中使用它是否出错？还是我错过了像普通jQuery这样添加的东西？

Answer 1

您可以更改

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

为

<select id="opd" name="opd" class="form-control" v-model="selectopd">