I'm trying to write my first Vue app, which will allow a CSV upload and display the data in a table. I can upload the file and render the contents to the console, and parse the CSV with Papa. I cannot seem to bind the data from the file to a table, though. I started here and added Papa parsing for CSV handling.
Here is the pertinent code:
Main.js
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
Upload.vue Component
<template>
<h1>Upload CSV</h1>
<input type='file' #change='loadTextFromFile'>
</template>
<script>
// csv parsing
import Papa from 'papaparse'
export default {
methods: {
loadTextFromFile (event) {
if (!event.target.files[0]) {
alert('Upload a file.')
} else {
let file = event.target.files[0]
if (file) {
let reader = new FileReader()
let config = {
delimiter: ',',
newline: '',
quoteChar: '"',
escapeChar: '"',
header: false,
trimHeaders: false
}
// reader.onload = e => this.$emit('load', e.target.result)
reader.onload = e => this.$emit('load', Papa.parse(event.target.result, config))
// trace what was emitted
reader.onload = function (event) {
let results = Papa.parse(event.target.result, config)
console.log('PAPA RESULT: ', results.data)
console.log('ROWS:', event.target.result)
}
reader.readAsText(file)
} else {
alert('Please select a file to upload.')
}
}
}
}
}
</script>
<style>
</style>
App.vue
<template>
<div id="app">
<h1>My CSV Handler</h1>
<br>
<upload #load="items = $event"></upload>
<br>
<table>
<thead>
</thead>
<tbody>
<!-- eslint-disable-next-line -->
<tr v-for="row in items">
<td>{{ row }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import Upload from './components/Upload'
export default {
name: 'app',
data: () => ({ items: [] }),
components: {
Upload
}
}
</script>
<style>
</style>
If I emit the raw e.target.result and change 'items' to 'text' everywhere in App.vue, I can successfully render the text data to a text-area just like the tutorial.
Thanks!
You're running into limitations of array reactivity. Have a look at the docs explaining the caveats.
When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely.
Source
Here's a quick fiddle showing how to use splice to replace the items array in a way such that it will be reactive to updates.
Related
I have made a vue dropzone component using dropzonejs. The component works however I'm not able to configure the dropzone to upload files larger than 256mb which I believe is the default. For testing purposes I have put 1mb(reducing max file size).
I have also tried putting my config code inside mounted beforeMount, create etc.
My Code
<template>
<div class="dropzone-container">
<form
:action="uploadurl"
class="dropzone drop-area"
enctype="multipart/form-data"
id="myDropzone"
ref="myDropzone"
:key="`dz-${dzkey}`"
>
<input type="hidden" name="path" :value="currentPath" />
</form>
<button class="finish-button" #click="finishUpload">Finish Upload</button>
</div>
</template>
<script>
// import * as Dropzone from "dropzone/dist/min/dropzone.min.js";
import FileHandling from "../fileHandling";
const Dropzone = require("dropzone/dist/dropzone.js");
Dropzone.autoDiscover = true;
export default {
name: "DropZone",
props: ["currentPath"],
data() {
return {
uploadurl: FileHandling.SendForUpload(),
dzkey: 0,
};
},
methods: {
finishUpload() {
this.$refs.myDropzone.dropzone.removeAllFiles();
this.$emit("finishedUpload");
},
dropconfig() {
console.log(Dropzone);
Dropzone.options[this.$refs.myDropzone] = {
maxFilesize: 1,
};
},
},
ready: function() {
this.dropconfig();
},
};
</script>
There are two issues in your code:
There is no ready hook. Perhaps you meant mounted:
export default {
// ❌ ready hook does not exist
//ready() {
// this.dropconfig();
//},
// ✅
mounted() {
this.dropconfig();
}
}
Dropzone.options is a map of element IDs (strings), not element instances (HTMLElement):
// ❌
//Dropzone.options[this.$refs.myDropzone] = {/*...*/};
// ✅ `myDropzone` is a string that matches element ID in template
Dropzone.options.myDropzone = {/*...*/};
Fixing those issues should allow your maxFilesize config to take effect.
I have a few components, javascript, and elements that needs to be ran in a certain order.
1st - opensheetmusicdisplay.min.js which I have in my index.html file. This isn't an issue.
2nd - <div id="xml">
3rd - xml-loader.js which depends on both the "xml" div and opensheetmusicdisplay.min,js
This is the index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<script rel="preload" src="<%= BASE_URL %>js/osmd/opensheetmusicdisplay.min.js"></script>
</head>
<body>
<div id="xml2">words go here</div>
<div id="app"></div>
</body>
</html>
And this is the JavaScript part I'm attempting to test:
window.onload = function() {
alert("xx == ", document.getElementById("xml2"));
}
alert("xx2 == ", document.getElementById("xml2"));
alert(JSON.stringify(opensheetmusicdisplay, null, 1));
When I run this, they both instances of "xml2" show blanks. The opensheetmusicdisplay does show data, which means it is reading from the source in the head section in index.html
It was pointed out to me in the comments that alert only take one argument. That's a mistake that I'm going to let sit for the moment. The error in the console is TypeError: document.getElementById(...) is null.
Now, this is the main.js. There are a lot of comments because of my various ideas:
// vue imports and config
import Vue from 'vue'
import App from '#/App'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
Vue.config.productionTip = false
// page imports
import Notation from '#/components/Notation'
import HomePage from '#/components/HomePage'
// component imports and registration
import { FoundationCSS } from '#/../node_modules/foundation-sites/dist/css/foundation.min.css'
Vue.component('foundation-css', FoundationCSS)
import SideNav from '#/components/SideNav'
Vue.component('side-nav', SideNav);
// import * as Osmd from '#/../public/js/osmd/opensheetmusicdisplay.min.js'
// Vue.component('osmd-js', Osmd)
// import { OsmdJs } from '#/components/Osmd'
import * as XmlJs from '#/../public/js/osmd/xml-loader.js'
Vue.component('xml-js', XmlJs)
// import XLoad from '#/components/XmlLoader'
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/',
components: {
maininfo: HomePage
}
},
{ path: '/chromatic-scales/c-chromatic-scale',
components: {
maininfo: Notation// ,
// xmlloader: XLoad
}
}
]
})
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
I registered XmlJs as global because this is the only way out of 100 things that actually works. I then embed it in Notation.vue like so:
<template>
<div>
<div id="xml">
{{ notation.data }}
</div>
<xml-js />
</div>
</template>
<script>
import axios from 'axios'
export default ({
data () {
return {
notation: null,
}
},
mounted () {
axios
.get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
.then(result => (this.notation = result))
}})
</script>
<style scoped></style>
The last file is the meat and potatoes of what I'm trying to do. The xml-loader.js slurps the data from <div id="xml"> and does whatever magic the program does in order to render the output I want. The issue is that there doesn't seem to be anyway to wait for the stuff in {{ notation.data }}.
I am new to using vuejs and front-end javascript frameworks in general. I do recognize the code is probably not optimal at this time.
There is race condition where DOM element is not available at the time when it's accessed. The solution is to not access DOM elements created by Vue outside of it. DOM element is ready for use only after asynchronous request:
<template>
<div>
<div ref="xml" id="xml">
{{ notation.data }}
</div>
<xml-js />
</div>
</template>
<script>
import axios from 'axios'
export default ({
data () {
return {
notation: null,
}
},
async mounted () {
const result = await axios
.get('http://localhost:3000/chromatic-scales/c-chromatic-scale')
this.notation = result;
this.$nextTick(); // wait for re-render
renderXml(this.$ref.xml); // pass DOM element to third-party renderer
}})
You can import xml-loader.js into the Notation.vue as a function. Then you can simply do something like this:
mounted () {
axios.get(PATH).then(result => {
this.notation = result
let xmlResult = loadXML(result)
doSomethingWithResult(xmlResult)
}
},
methods: {
doSomethingWithResult (result) {
// do something
}
}
tl;dr:
Given a VueJS VNode object, how do I get the HTML element that would be generated if it were rendered?
e.g.:
> temp1
VNode {tag: "h1", data: undefined, children: Array(1), text: undefined, elm: undefined, …}
> temp1.children[0]
VNode {tag: undefined, data: undefined, children: undefined, text: "Test", elm: undefined, …}
> doSomething(temp1)
<h1>Test</h1>
Goal
I'm attempting to build a small VueJS wrapper around the DataTables.net library.
To mimic the behavior of HTML tables in my markup, I want something like the following:
<datatable>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<datatable-row v-for="person in people">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.salary }}</td>
</datatable-row>
</tbody>
</datatable>
What I've done so far
I've started to implement this as follows:
DataTable.vue
<template>
<table ref="table" class="display table table-striped" cellspacing="0" width="100%">
<slot></slot>
</table>
</template>
<script>
/* global $ */
export default {
data: () => ({
instance: null
}),
mounted() {
this.instance = $(this.$refs.table).dataTable();
this.$el.addEventListener("dt.row_added", function(e) {
this.addRow(e.detail);
});
},
methods: {
addRow(row) {
// TODO <-----
console.log(row);
}
}
};
</script>
DataTableRow.vue
<script>
/* global CustomEvent */
export default {
mounted() {
this.$nextTick(() => {
this.$el.dispatchEvent(new CustomEvent("dt.row_added", {
bubbles: true,
detail: this.$slots.default.filter(col => col.tag === "td")
}));
});
},
render() { return ""; }
};
What this currently does:
When the page loads, the DataTable is initialized. So the column headers are properly formatted and I see "Showing 0 to 0 of 0 entries" in the bottom left
The CustomEvent is able to bubble up past the <tbody> and be caught by the DataTable element successfully (circumventing the limitation in VueJS that you can't listen to events on slots)
What this does not do:
Actually add the row
My event is giving me an array of VNode objects. There's one VNode per column in my row. The DataTables API has an addRow function which can be called like so:
this.instance.row.add(["col1", "col2", "col3"]);
In my case, I want the resultant element from the rendering of the VNode to be the elements in this array.
var elems = [];
for (var i = 0; i < row.length; i++)
elems[i] = compile(row[i]);
this.instance.row.add(elems);
Unfortunately this compile method eludes me. I tried skimming the VueJS documentation and I tried Googling it, but no dice. I tried manually passing the createElement function (the parameter passed to the render method) but this threw an error. How can I ask VueJS to render a VNode without injecting the result into the DOM?
I ran into the same issue wanting to do basically the same thing with a row details template for DataTables.net.
One solution could be to create a generic component that renders out a VNode and instantiate that programmatically. Here is how my setup for a dynamic detail row that I insert using datatable's row.child() API.
RenderNode.js
export default {
props: ['node'],
render(h, context) {
return this.node ? this.node : ''
}
}
Datatables.vue
Include the renderer component from above
import Vue from 'vue'
import nodeRenderer from './RenderNode'
Instantiate and mount the renderer to get the compiled HTML
// Assume we have `myVNode` and want its compiled HTML
const DetailConstructor = Vue.extend(nodeRenderer)
const detailRenderer = new DetailConstructor({
propsData: {
node: myVNode
}
})
detailRenderer.$mount()
// detailRenderer.$el is now a compiled DOM element
row.child(detailRenderer.$el).show()
You should define your components like with:
import {createApp} from 'vue';
import {defineAsyncComponent} from "vue";
createApp({
components: {
'top-bar': defineAsyncComponent(() => import('#Partials/top-bar'))
}
}).mount("#app")
Similar to this question here I'm trying to pass socket.io-client data to a Vue.js component but it's not displaying on the page -- though it writes to console.log just fine. My data is JSON (his was an array) so the solution in the link above doesn't seem to work.
The error I'm getting is:
[Vue warn]: Property or method "items" is not defined on the instance but referenced during render.
main.js
import Vue from 'vue'
import App from './App'
import io from 'socket.io-client'
Vue.config.productionTip = false
var socket = io.connect('http://localhost:3000')
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>',
data: {
items: []
},
mounted: function () {
socket.on('connect', function () {
socket.on('message', function (message) {
console.log(message)
this.items = message.content
}.bind(this))
socket.emit('subscribe', 'mu')
})
}
})
App.vue
<template>
<div id="app">
<h1>client</h1>
<div v-for="item in items" class="card">
<div class="card-block">
<h4 class="card-title">Symbol: {{ item.symbol }}</h4>
<p class="card-text">Updated: {{ item.lastUpdated }}</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
sample data
{
"symbol":"MU",
"lastUpdated":1520283600000
}
Any help would be greatly appreciated. Thanks.
the data attribute in your vue instance needs to be a function which returns something, your items array for instance. so instead of
data: {
items: []
},
you should re-write as
data () {
return {
items: []
}
},
I want some help in getting data form json array file is in the link
Html
<div>
<div v-for="data in myJson.id " >{{ data }}</div>
</div>
js
import json from '.././json/data.json'
export default {
components: {
MainLayout,
},
data: function(){
return {
myJson:json
}
},
method:{
getjson:function(){
this.json = JSON.parse(myJson);
}
}
}
i want to access only the data with some specific id and i cannot access it using the syntax i am using
edit
Json file
Apparently, you do not even need JSON.parse. It seems to work without it... Put your JSON file in the same directory as your component and try this:
import data from './data.json'
export default {
created () {
for (const item of data[0]['file']) {
console.log(`
Name: ${item.name}
Type: ${item.type}
Size: ${item.filesize}
Dimensions: ${item.dimension[0].width}x${item.dimension[0].height}
`)
}
}
}
You should see information from your JSON file in your console when the page loads.
<script>
import MainLayout from '../layouts/Main.vue'
import json from '.././json/data.json'
export default {
components: {
MainLayout,
},
data: function(){
return {
myJson: json[0].file
}
},
method:{
}
}
</script>
html
<div v-for="data in myJson">
{{ data.name }}
{{ data.filesize}}
{{ data.dimension[0].width}}x{{data.dimension[0].height}}
</div>
using the above code i utilized and used to implemented according to my needs and it worked