Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Snippet for solving fabricjs problem in creating dynamic dropdown with vuejs
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/vue@2.5.21/dist/vue.js
office-ui-fabric-js@1.4.0/dist/css/fabric.min.css
office-ui-fabric-js@1.4.0/dist/css/fabric.components.min.css
office-ui-fabric-js@1.4.0/dist/js/fabric.min.js
core-js@2.4.1/client/core.min.js
@types/core-js
jquery@3.1.1
@types/jquery@3.3.1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment