在 vuejs 中将选定对象显示为字符串答案

【问题标题】：Displaying a selected object as string in vuejs在 vuejs 中将选定对象显示为字符串
【发布时间】：2020-04-26 01:36:56
【问题描述】：

下面是我用来实现 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>

我需要将对象显示为字符串。事实上，一个越来越 [object Object]。我试过 .text() 但它只给出部门的名称。在我的情况下，我需要整个对象，但需要像 {“id”：5、“departmentCode”：“ARC”、“departmentName”：“Architecture”} 这样的字符串。请帮忙。问候。

【问题讨论】：

标签： vue.js axios jquery-select2

【解决方案1】：

v-bind:value="department.id"

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

【讨论】：

嗨阿纳托利。我应该如何在 ES5 中应用它。感谢回复
你可以使用 babel 来 polyfill find 方法或者只使用 for 循环语句。
对此表示感谢！