I have found a tool called XLSX to JSON on github, which has been made using vuejs/sheetjs. git repo, This tool is available online via an interface - but recently it seems to have broken and I cant download my converted json file.
Therefore my intention was to clone the repo, and change some bits around to fix it (just console json file instead of DL).
I haven't used Vue js before. After looking through the index and the origins of the functions I saw that the whole page seems to be reliant on this app.vue file. However - when editing the values and reloading the webpage - theres no change what so ever!
App.vue:
<template>
<div class="col">
<div class="row">
<div id="dropZone" v-on:drop.prevent="parseXLSX($event)" v-on:dragend="cleanup" ondragenter="event.preventDefault();" ondragover="event.preventDefault(); event.dataTransfer.dropEffect='copy'" class="col drop-box">
<h2 class="text-center"> Drag your xlsx file here.</h2>
</div>
</div>
<div class="row">
<input type='file' id='inputFile' v-on:change="parseXLSX($event.target.files)">
<div v-if="hasDownload">
<a id="download"> Download Localalization JSON </a>
</div>
</div>
<div class="row">
<div class="col json-box">
<h2 class="text-center"> JSON Output</h2>
<pre id="output"> </pre>
</div>
</div>
<xlsx-footer></xlsx-footer>
</div>
</template>
<script>
import Footer from './components/footer.vue';
export default {
data() {
return {
hasDownload: false,
}
},
methods: {
parseXLSX(event) {
const XLSX = window.XLSX;
let file = this.getFile(event);
let workBook = null;
let jsonData = null;
if(file !== null) {
const reader = new FileReader();
const rABS = true;
reader.onload = (event) => {
// I WANT TO do edits but nothing seems to work
//console logs not working etc...
const data = event.target.result;
if(rABS) {
workBook = XLSX.read(data, {type: 'binary'});
jsonData = workBook.SheetNames.reduce((initial, name) => {
const sheet = workBook.Sheets[name];
initial[name] = XLSX.utils.sheet_to_json(sheet);
return initial;
}, {});
const dataString = JSON.stringify(jsonData, 2, 2);
document.getElementById('output').innerHTML = dataString.slice(0, 300).concat("...");
this.setDownload(dataString);
}
}
if(rABS) reader.readAsBinaryString(file);
else reader.readAsArrayBuffer(file);
}
},
getFile(item) {
if(item.dataTransfer !== undefined) {
const dt = item.dataTransfer;
if(dt.items) {
if(dt.items[0].kind == 'file') {
return dt.items[0].getAsFile();
}
}
}
else {
return item[0];
}
},
setDownload(json) {
this.hasDownload = true;
setTimeout(()=> {
const el = document.getElementById("download");
el.href = `data:text/json;charset=utf-8,${encodeURIComponent(json)}`;
el.download = 'localization.json';
}, 1000)
},
cleanup(event) {
console.log("Cleaned up Event", event);
}
},
components: {
'xlsx-footer': Footer,
}
}
</script>
main.js:
'use strict';
var _vue = require('vue');
var _vue2 = _interopRequireDefault(_vue);
var _app = require('./app.vue');
var _app2 = _interopRequireDefault(_app);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var app = new _vue2.default({
el: "#app",
render: function render(h) {
return h(_app2.default);
}
});
index.html:
<!DOCTYPE html>
<html>
<head>
<title> XLSX-TO-JSON </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/tether/1.4.0/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.11.3/xlsx.full.min.js"></script>
<link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
<h1 class="title text-center"> XLSX-TO-JSON </h1>
<div id="app" class="container">
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"> </script>
<script src="bin/bundle.js"></script>
<!-- <script src="assets/bundle.js"></script> -->
</body>
</html>
All I want to do is edit the functions in the app.vue file!
Any help would be great, cheers!
Try to modify the package.json file by adding "prod":"webpack" in the "scripts" brackets. Running npm run prod should recreate your bundle.js file after .vue files modification using the webpack.config.js provided.
Also you could use script test using npm run test which launch webpack-dev-server and enable hot reload which is more convinient for dev purpose.
When you make change in any vue js file you have run npm run prod and you have to either upload the whole project in the server or upload the public folder in the server
Related
I'm using QUASAR and I want to get the state of my q-checkbox whether if it's checked or not. I've used event.target.checked and event.target.value but they are all undefined.
my checkbox:
<q-checkbox
v-on:click="addServices(full_service, $event)"
v-model="form.selected_full_services"
:val="full_service" />
my method:
addServices(full_service, event) {
console.log(event.target.checked)
console.log(event.target.value)
}
console:
output undefined
If I understood you correctly, maybe you don't need function at all :
const { ref } = Vue
const app = Vue.createApp({
setup () {
const full_services = ref( ['aaa', 'bbb', 'ccc'] )
const form = ref( { selected_full_services: [] } )
return { form, full_services }
}
})
app.use(Quasar)
app.mount('#q-app')
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar#2.10.1/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<div id="q-app">
{{form}}
<div v-for="full_service in full_services">
<q-checkbox
:label="full_service"
v-model="form.selected_full_services"
:val="full_service" />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue#3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar#2.10.1/dist/quasar.umd.prod.js"></script>
Using Vue.js, how do you use axios GET to display the response in a dialog?
I've tried the following:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<template>
<label>Protocol</label> Display protocol details from json
<div class="text-xs-center">
<br>
</div>
</template>
<script>
export default {
dialog3: false
created() {
let self = this
axios.get('http://localhost:4000/ap/device')
.then(function(response) {
self.fDModelName(response.data.result)
console.log(JSON.stringify(response.data.result))
})
},
methods: {
fDModelName: function(message) {
console.log("inside")
}
}
}
</script>
</body>
</html>
Create a data object where you have content as a key. On component created, you can assign it to the component's content value.
<template>
<div>
{{ content }}
</div>
</template>
<script>
export default {
data () {
return {
content: []
}
},
created () {
axios.get('http://localhost:4000/ap/device')
.then(function (response) {
this.content = response.data.result
})
}
}
</script>
I have a dynamic img being pulled from an api using vue.js. For some strange reason, the image won't bind. I have tried both :src. and :attr but neither works. The url does display in the vue console inside of the data but can't get the image to display on the page. any help will go a long way.
<html>
<head>
<style></style>
</head>
<body>
<div class="container">
<div id="editor">
<img v-bind:src="PictureURL" />
</div>
</div>
<script type="text/javascript" src="https://unpkg.com/vue#2.0.3/dist/vue.js"></script>
<script>
new Vue({
el: "#editor",
data: {
PictureUrl: "",
},
created: function() {
this.getCurrentUser();
},
methods: {
getCurrentUser: function() {
var root = 'https://example.com';
var headers = {
accept: "application/json;odata=verbose"
}
var vm = this;
var __REQUESTDIGEST = '';
$.ajax({
url: root + "_api/Properties",
type: 'Get',
headers: headers,
success: function(data) {
vm.PictureUrl = data.d.PictureUrl;
}
})
},
}
})
</script>
</body>
</html>
Change <img v-bind:src="PictureURL" /> to <img v-bind:src="PictureUrl" />, so that you match the data item name. Vue should be giving you an error in the console about this.
https://jsfiddle.net/kch7sfda/
Example here.
You can try to:
1. add v-if to img element
2. rename PictureUrl to pictureUrl (first lowercase letter)
Why does filter do not work?
Error says: [Vue warn]: Failed to resolve filter: uppercase.
Not sure why but filter is not working.
Also, is this the best way to code this functionality? Are there any ways to do this, or the suggested ways? I'm not sure about using the $refs, maybe I can do this simpler, but with effective use of reusable components.
I'm trying to emulate an Ajax Response by using random message and status instead.
Link: JSBIN
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div id="app">
<login-alert ref="refalert"></login-alert>
<p>
<button #click="showme">Random Alert</button>
</p>
</div>
<script src=" https://unpkg.com/vue"></script>
<template id="template-alert">
<div v-if="showAlert">
<div :class="'alert alert-'+alertType+' alert-dismissible'" transition="fade">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true" v-on:click="close">×</button>
<h4>{{title|uppercase}}!</h4>
{{message}}
</div>
</div>
</template>
<script>
Vue.component('login-alert', {
template: '#template-alert',
data: function() {
return {
alertType : null,
title : null,
message : null,
showAlert : false
}
},
methods: {
close: function() {
this.alertType= null;
this.title= null;
this.message= null;
this.showAlert= false;
},
open: function(type, message) {
this.alertType= type;
this.title = type;
this.message= message;
this.showAlert= true;
}
}
});
var app = new Vue({
el: '#app',
methods: {
showme: function() {
var randomStatus = ['error', 'warning', 'success'];
var randomMessage = ['Lorem Ipsum', 'Adolor Sit Amet', 'Abed Meepo'];
var status = randomStatus[Math.floor(Math.random() * randomStatus.length)];
var message = randomMessage[Math.floor(Math.random() * randomMessage.length)];
this.$refs.refalert.open(status,message);
}
}
});
</script>
</body>
</html>
The uppercase filter has been removed in Vue.js 2.
https://v2.vuejs.org/v2/guide/migration.html#Built-In-Text-Filters-removed
You can simply use:
{{ text.toUpperCase() }}
As far as the structure of your code goes, something like this is probably better off in a method:
close: function() {
this.alertType= null;
this.title= null;
this.message= null;
this.showAlert= false;
}
Since you are duplicating it twice but just with different values.
Hi I am having some trouble getting a menu to add options dynamically. They idea is the selection of the first menu decides what the second menu contains. I have built this before successfully without polymer. And it semi-works with polymer. dropdown one gets its content from json based on the selection, dropdown two gets its content also from a json. This part works, the issue is when you make a selection from dropdown one and then change it, dropdown two doesn't delete the old selection. I got this working last time with a function that first deletes all dropdown two's children before repopulating the content. Issue with Polymer is once the childNodes are deleted the dropdown breaks and no other children can be added via data binding. tried adding native with plain JS which populates the menu but the children are not selectable(from what I have read this might be a bug). Also I believe data binding on dynamic items also doesnt work anymore. anyway here is what I have:
<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import" href="../../../bower_components/paper-material/paper-material.html">
<link rel="import" href="../../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../../../bower_components/paper-menu/paper-menu.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item.html">
<link rel="import" href="../../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../../bower_components/paper-button/paper-button.html">
<link rel="import" href="../../../bower_components/iron-dropdown/demo/x-select.html">
<dom-module id="add-skill">
<template>
<paper-material elevation="1">
<paper-dropdown-menu id="ddMenu" attr-for-selected="value" >
<paper-menu class="dropdown-content" id="vendorSelect" on-iron-select="_itemSelected">
<template is="dom-repeat" items="{{vendorList}}">
<paper-item id="vendorName" value="item">[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<paper-dropdown-menu>
<paper-menu class="dropdown-content" id="certificationSelect" on-iron-select="_itemSelected">
</paper-menu>
</paper-dropdown-menu>
<!-- testing ideas -->
<paper-dropdown-menu>
<paper-menu class="dropdown-content" id="test" on-iron-select="_itemSelected">
<option extends="paper-item"> Option </option>
<option extends="paper-item"> Option1 </option>
<option extends="paper-item"> Option2 </option>
</paper-menu>
</paper-dropdown-menu>
<paper-button on-click="_deleteElement">
Delete
</paper-button>
</paper-material>
<iron-ajax
id="vendorSubmit"
method="POST"
url="../../../addskill.php"
handle-as="json"
on-response="handleVendorResponse"
debounce-duration="300">
</iron-ajax>
<iron-ajax
id="certificationSubmit"
method="POST"
url="../../../addskill.php"
handle-as="json"
on-response="handleCertificationResponse"
debounce-duration="300">
</iron-ajax>
</template>
<script>
Polymer({
is: 'add-skill',
ready: function() {
this.sendVendorRequest();
this.vendorList = [];
this.certificationList = [];
},
sendVendorRequest: function() {
var datalist = 'vendor=' + encodeURIComponent('1');
//console.log('datalist: '+datalist);
this.$.vendorSubmit.body = datalist;
this.$.vendorSubmit.generateRequest();
},
handleVendorResponse: function(request) {
var response = request.detail.response;
for (var i = 0; i < response.length; i++) {
this.push('vendorList', response[i].name);
}
},
vendorClick: function() {
var item = this.$;
//var itemx = this.$.vendorSelect.selectedItem.innerHTML;
//console.log(item);
//console.log(itemx);
},
sendCertificationRequest: function(vendor) {
var datalist = 'vendorName=' + encodeURIComponent(vendor);
console.log('datalist: ' + datalist);
this.$.certificationSubmit.body = datalist;
this.$.certificationSubmit.generateRequest();
},
handleCertificationResponse: function(request) {
var response = request.detail.response;
//var vendorSelect = document.getElementById('vendorSelect');
for (var i = 0; i < response.length; i++) {
this.push('certificationList', response[i].name);
}
console.log(this.certificationList);
},
_itemSelected: function(e) {
var selectedItem = e.target.selectedItem;
if (selectedItem) {
this.sendCertificationRequest(selectedItem.innerText);
console.log("selected: " + selectedItem.innerText);
}
},
_removeArray: function(arr) {
this.$.certificationList.remove();
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
arr.splice(0, i);
arr.pop();
}
console.log(arr.length);
},
_deleteElement: function() {
var element = document.getElementById('certificationSelect');
while (element.firstChild) {
element.removeChild(element.firstChild);
}
},
_createElement: function() {
var doc = document.querySelector('#test');
var option = document.createElement('option');
option.extends = "paper-item";
option.innerHTML = "Option";
doc.appendChild(option);
}
});
</script>
</dom-module>
Any guidance is always appreciated
Here's a working version of your JSBin, which uses data binding and a <template is="dom-repeat"> to create new, selectable <paper-item> elements dynamically.
I'm not sure what specific issues you ran into when using data binding to stamp out the <paper-item> elements, but the important thing to remember in Polymer 1.0 is that when you modify an Array (or an Object) that is bound to a template, you need to use the new helper methods (like this.push('arrayName', newItem)) to ensure the bindings are updated.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<base href="http://element-party.xyz">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="all-elements.html">
</head>
<body>
<dom-module id="x-module">
<template>
<paper-material elevation="1">
<paper-dropdown-menu>
<paper-menu class="dropdown-content" on-iron-select="_itemSelected">
<template is="dom-repeat" items="[[_menuItems]]">
<paper-item>[[item]]</paper-item>
</template>
</paper-menu>
</paper-dropdown-menu>
<paper-button on-click="_createItem">Add</paper-button>
</paper-material>
</template>
<script>
Polymer({
_createItem: function() {
this.push('_menuItems', 'New Option ' + this._menuItems.length);
},
_itemSelected: function() {
console.log('Selected!');
},
ready: function() {
this._menuItems = ['First Initial Option', 'Second Initial Option'];
}
});
</script>
</dom-module>
<x-module></x-module>
</body>
</html>