Snippet for solving fabricjs problem in creating dynamic dropdown with vuejs

FabricJs Dropdown + VueJs.WORD.yaml

name: FabricJs Dropdown + VueJs
description: Snippet for solving fabricjs problem in creating dynamic dropdown with vuejs
host: WORD
api_set: {}
script:
  content: "new Vue({\r\n  el: \"#app\",\r\n  data: {\r\n    message: \"Hello Vue\",\r\n    clausesEN: [],\r\n    clausesRO: []\r\n  },\r\n  mounted: function() {\r\n    var vm = this;\r\n    return fetch(\"https://easy-clause.firebaseio.com/clauses-type.json\")\r\n      .then(function(response) {\r\n        return response.json();\r\n      })\r\n      .then(function(result) {\r\n        console.log(result);\r\n        vm.clausesEN = result.EN;\r\n        vm.clausesRO = result.RO;\r\n        vm.$nextTick(function() {\r\n          var DropdownHTMLElements = document.querySelectorAll(\".ms-Dropdown\");\r\n          for (var i = 0; i < DropdownHTMLElements.length; ++i) {\r\n            new fabric[\"Dropdown\"](DropdownHTMLElements[i]);\r\n          }\r\n        });\r\n      })\r\n      .catch(function(error) {\r\n        console.log(error);\r\n      });\r\n  },\r\n\r\n});\r\n"
  language: typescript
template:
  content: "<div id=\"app\">\n\t<p>{{message}}</p>\n\t<div class=\"ms-Dropdown\" tabindex=\"0\">\n\t\t<i class=\"ms-Dropdown-caretDown ms-Icon ms-Icon--ChevronDown\"></i>\n\t\t<select class=\"ms-Dropdown-select\">\n\t\t\t\t<option>Select Clause</option>\n\t      <option v-for=\"clause in clausesEN\" v-bind:value=\"clause.typeValue\">\n            {{clause.type}}\n        </option>\n\t  </select>\n\t</div>\n</div>"
  language: html
style:
  content: ''
  language: css
libraries: |
  https://appsforoffice.microsoft.com/lib/1/hosted/office.js
  @types/office-js
  https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js

  [email protected]/dist/css/fabric.min.css
  [email protected]/dist/css/fabric.components.min.css
  [email protected]/dist/js/fabric.min.js

  [email protected]/client/core.min.js
  @types/core-js

  [email protected]
  @types/[email protected]