vue+百度翻译

<template>
    <div>
        <div id="div1" contenteditable="true" ></div>
        <div class="block" style="margin: 20px">
            <el-button type="primary" style="margin-left: 20px" @click="delDate">主要按钮</el-button>
        </div>
        <div id="div2" contenteditable="true" ></div>
    </div>
</template>

<script>
import md5 from "js-md5";
import $ from 'jquery';
export default {
  data() {
    return {
    };
  },
    methods: {
        
        delDate() {
            var str = "";
            for(let i = 0;i<$("#div1")[0].childNodes.length;i++){
                if($("#div1")[0].childNodes[i].textContent){
                    str = str+$("#div1")[0].childNodes[i].textContent+"\n";
                }
            }
            var appid = "20210812000914772";
            var key = "agk7lBu5fWVw5hiu3lxh";
            var salt = new Date().getTime();
            var query = str;
            var from = "zh";
            var to = "jp";
            var str1 = appid + query + salt + key;
            var sign = md5(str1);
            $.ajax({
                url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
                type: 'POST',
                dataType: 'jsonp',
                data: {
                    q: query,
                    appid: appid,
                    salt: salt,
                    from: from,
                    to: to,
                    sign: sign
                },
                success: function (data) {
                    $("#div2").text(JSON.stringify(data.trans_result))
                }
            });
        },
    },
};
</script>
<style scoped>
 #div1{
     height: 200px;
     padding: 20px;
     border: solid 1px deepskyblue;
 }
 #div2{
     height: 200px;
     padding: 20px;
     border: solid 1px royalblue;
 }
</style>