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