Vue.js 在vuejs中将选定对象显示为字符串_Vue.js_Axios_Jquery Select2

Vue.js 在vuejs中将选定对象显示为字符串

vue.js

Vue.js 在vuejs中将选定对象显示为字符串,vue.js,axios,jquery-select2,Vue.js,Axios,Jquery Select2,下面是我用来实现select2的html代码 <!DOCTYPE html> <html> <head> <title>department</title> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"> <link href="https://cdn

下面是我用来实现select2的html代码

<!DOCTYPE html>
<html>
<head>
    <title>department</title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" ></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.12/dist/js/select2.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="ProgramForm">

          <div class="form-row">
                    <div class="form-group col-md-4">
                    <label for="department">Department<span style="color:red">*</span></label>
                        <select v-model="department"   class="form-control select2" >
                            <option> </option>
                            <option  v-for="department in departmentData" v-bind:value="department">{{department.departmentName}}</option>
                        </select>
                  </div>
            </div>                        

               <p>Selected{{department}}</p>
</div>


部门
系*
{{部门名称}
所选{{部门}

我的脚本部分如下

<script type="text/javascript" >
$(function () {
    var programFormVM=new Vue({
        el:"#ProgramForm",
        data:function(){    
            return {
                department:{},
                departmentData:[
                                { "id": 1, "departmentCode": "HR", "departmentName": "Human Resource" },
                                { "id": 2, "departmentCode": "ENG", "departmentName": "Engineering" }, 
                                { "id": 3, "departmentCode": "AE", "departmentName": "Agricultural Economics" },
                                { "id": 4, "departmentCode": "FS", "departmentName": "Field Station" }, 
                                { "id": 5, "departmentCode": "ARC", "departmentName": "Architecture" }
                               ]        

            }

        },
        created:function (){
        },
        methods:{

        },
    }); 
  $('.select2').select2({
    placeholder: "Select a department"
   }).on('change', function(e) {
      //  var data = $(".select2 option:selected").val();
        programFormVM.department=$(".select2 option:selected").val();
      });   
});
</script>

</body>
</html>


$（函数（）{
var programmformvm=新的Vue({
el:#程序表单“，
数据：函数（）{
返回{
部门：{}，
部门数据：[
{“id”：1，“部门代码”：“HR”，“部门名称”：“人力资源”}，
{“id”：2，“部门代码”：“ENG”，“部门名称”：“工程”}，
{“id”：3，“部门代码”：“AE”，“部门名称”：“农业经济学”}，
{“id”：4，“部门代码”：“FS”，“部门名称”：“现场站”}，
{“id”：5，“部门代码”：“ARC”，“部门名称”：“架构”}
]        
}
},
已创建：函数（）{
},
方法：{
},
}); 
$（'.select2'）。选择2({
占位符：“选择一个部门”
}).on（‘变更’，功能（e）{
//变量数据=$（“.select2选项：已选”）.val（）；
programFormVM.department=$（“.select2选项：选中”）.val（）；
});   
});

我需要将对象显示为字符串。事实上，一个get[object]。我已经尝试了.text（），但它只给出了部门的名称。在我的例子中，我需要整个对象，但作为类似{“id”：5，“departmentCode”：“ARC”，“departmentName”：“Architecture”}的字符串。请帮忙。问候

v-bind:value="department.id"

const selectedValue=
const selectedDepartment=this.departmentData.find（x=>x.id==selectedVal）

你好，安纳托利。我应该如何在ES5中应用它。感谢您的回复您可以使用babel来多填充find方法，或者只使用for循环语句。我对此表示感谢！

const selectedValue = <value from select>
const selectedDepartment = this.departmentData.find(x => x.id === selectedVal)