jsGrid 未显示在 Vue-cli 脚手架应用程序中

如何解决jsGrid 未显示在 Vue-cli 脚手架应用程序中

我正在尝试在 Vue-cli 脚手架应用程序中显示 jsGrid。安装的功能似乎没有触发。我正在尝试通过 VueJs 执行 JavaScript 函数。我已经在应用程序的根文件夹中完成了 。

该代码在单页 HTML 文件中与 VueJS 配合良好。

<template>
  <div>
    <br>
    <div class=" from-yellow-700 bg-gradient-to-br" id="jsGrid"><i class="fas fa-arrow-down"></i> {{ message }} <i class="fas fa-arrow-down"></i></div>
  </div>
</template>

<script>
import jQuery from "jquery";

export default {
  // name: "oneview",mounted:function(){
    jQuery("#jsGrid").jsGrid({
      width: "100%",height: "400px",inserting: true,editing: true,sorting: true,paging: true,data: this.clients,fields: [
          { name: "Name",type: "text",width: 150,validate: "required" },{ name: "Age",type: "number",width: 50 },{ name: "Address",width: 200 },{ name: "Country",type: "select",items: this.countries,valueField: "Id",textField: "Name" },{ name: "Married",type: "checkBox",title: "Is Married",sorting: false },{ type: "control" }
      ]
    });
  },data: function() {
    return {
      message: 'jsGrid says Hello Vue App!',clients: [
          { "Name": "otto Clay","Age": 25,"Country": 1,"Address": "Ap #897-1459 Quam Avenue","Married": false },{ "Name": "Connor Johnston","Age": 45,"Country": 2,"Address": "Ap #370-4647 dis Av.","Married": true },],countries: [
          { Name: "",Id: 0 },{ Name: "United States",Id: 1 },{ Name: "Canada",Id: 2 },{ Name: "United Kingdom",Id: 3 }
      ],}
  },methods: {
  },}
</script>

<style scoped></style>