link2329 link2330 link2331 link2332 link2333 link2334 link2335 link2336 link2337 link2338 link2339 link2340 link2341 link2342 link2343 link2344 link2345 link2346 link2347 link2348 link2349 link2350 link2351 link2352 link2353 link2354 link2355 link2356 link2357 link2358 link2359 link2360 link2361 link2362 link2363 link2364 link2365 link2366 link2367 link2368 link2369 link2370 link2371 link2372 link2373 link2374 link2375 link2376 link2377 link2378 link2379 link2380 link2381 link2382 link2383 link2384 link2385 link2386 link2387 link2388 link2389 link2390 link2391 link2392 link2393 link2394 link2395 link2396 link2397 link2398 link2399 link2400 link2401 link2402 link2403 link2404 link2405 link2406 link2407 link2408 link2409 link2410 link2411 link2412 link2413 link2414 link2415 link2416 link2417 link2418 link2419 link2420 link2421 link2422 link2423 link2424 link2425 link2426 link2427 link2428 link2429 link2430 link2431 link2432 link2433 link2434 link2435 link2436 link2437 link2438 link2439 link2440 link2441 link2442 link2443 link2444 link2445 link2446 link2447 link2448 link2449 link2450 link2451 link2452 link2453 link2454 link2455 link2456 link2457 link2458 link2459 link2460 link2461 link2462 link2463 link2464 link2465

[Vue.js] why v-for does not render all objects? Subscribe to RSS

i’m trying to display search result that i’m getting it from api. but v-for does not render all objects?

this is my search-box:

as you see there is just one item, but every thing is right in vue.js dev tools:

and this is vue.js component (v-for):

and this is dom result:

whats wrong?

this is data:

Solution :

The value in result is an object and not an array. While it is possible to iterate over an object using v-for it seems unlikely that this is what you want here. the object has the properties “0”, “1”, “2”, “3” and “ok”. All 5 of these will be included in the v-for, which is why you have 5 <li> elements being generated.

Try changing the code to the following to get a better understanding of what’s going on:

<li v-for=”(item, index) in result” :key=”index”>
index: { index }
<br><br>
item: { item }
</li>

I would suggest changing the format you use for result to put the results themselves inside an array, separate from the “ok” property. So the server might return something like {“ok”: true, “results”: […]} and you could then pluck out the “results” property and throw away the rest.

There is a further problem. In the original data you have a typo in several of the data entries. The property “link;” should be called “link”. Note the extra ; at the end.

Solution 2:

Array object might be null or blank.

Blockquote

<div class=”category-list” v-for=”category in categories”>
<router-link :to=”{category.name}” class=”dropdown-item”>{category.text}</router-link>
</div>

if you are getting still error please send me object which are get in array.

[Vue.js] Error in render "TypeError Converting circular structure to JSON Subscribe to RSS

there is successfully created a Single File Component in Vue; there are no compilation errors, however, when I attempt to view the component (by navigating to it’s route link), the expected page is not displayed, and instead, I get a stack trace printed in the (Chrome) browser - using the vue.js Devtools plugin.

Here is the stacktrace output in the vue.js Devtools plugin console:

vue.runtime.esm.js?2b0e:619 [vue.js warn]: Error in render:
log.js?1afd:24 [HMR] Waiting for update signal from WDS…
vue.runtime.esm.js?2b0e:619 [vue.js warn]: Error in render: “TypeError: Converting circular structure to JSON
--> starting at object with constructor ‘DockPanel’
| property ‘_layout’ -> object with constructor ‘DockLayout’
-– property ‘_parent’ closes the circle”

found in

-–> <Demo> at src/components/Demo.vue
<App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3544
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
merged @ vue.runtime.esm.js?2b0e:3301
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
(anonymous) @ main.ts?bc82:8
./src/main.ts @ app.js:5941
__webpack_require__ @ app.js:767
fn @ app.js:130
1 @ app.js:6015
__webpack_require__ @ app.js:767
(anonymous) @ app.js:902
(anonymous) @ app.js:905
Show 11 more frames
vue.runtime.esm.js?2b0e:1888 TypeError: Converting circular structure to JSON
--> starting at object with constructor ‘DockPanel’
| property ‘_layout’ -> object with constructor ‘DockLayout’
-– property ‘_parent’ closes the circle
at JSON.stringify (<anonymous>)
at Proxy.toString (vue.runtime.esm.js?2b0e:94)
at Proxy.render (eval at ./node_modules/cache-loader/dist/cjs.js?{“cacheDirectory”:”node_modules/.cache/vue-loader”,”cacheIdentifier”:”4105b414-vue-loader-template”}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Demo.vue?vue&type=template&id=09260093&scoped=true& (app.js:2401), <anonymous>:10:25)
at VueComponent.Vue._render (vue.runtime.esm.js?2b0e:3542)
at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4060)
at Watcher.get (vue.runtime.esm.js?2b0e:4473)
at new Watcher (vue.runtime.esm.js?2b0e:4462)
at mountComponent (vue.runtime.esm.js?2b0e:4067)
at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8409)
at init (vue.runtime.esm.js?2b0e:3118)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
Vue._render @ vue.runtime.esm.js?2b0e:3544
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
merged @ vue.runtime.esm.js?2b0e:3301
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
createChildren @ vue.runtime.esm.js?2b0e:6047
createElm @ vue.runtime.esm.js?2b0e:5948
patch @ vue.runtime.esm.js?2b0e:6471
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
init @ vue.runtime.esm.js?2b0e:3118
createComponent @ vue.runtime.esm.js?2b0e:5972
createElm @ vue.runtime.esm.js?2b0e:5919
patch @ vue.runtime.esm.js?2b0e:6510
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
(anonymous) @ main.ts?bc82:8
./src/main.ts @ app.js:5941
__webpack_require__ @ app.js:767
fn @ app.js:130
1 @ app.js:6015
__webpack_require__ @ app.js:767
(anonymous) @ app.js:902
(anonymous) @ app.js:905
Show 10 more frames
Demo.vue?96da:47 *** this actually ran

package.json

{
“name”: “client”,
“version”: “0.1.0”,
“private”: true,
“scripts”: {
“serve”: “vue-cli-service serve”,
“build”: “vue-cli-service build”,
“lint”: “vue-cli-service lint”,
“test:unit”: “vue-cli-service test:unit”
},
“dependencies”: {
“@phosphor/widgets”: “^1.7.0”,
“axios”: “^0.19.0”,
“core-js”: “^2.6.5”,
“vue”: “^2.6.10”,
“vue-class-component”: “^7.0.2”,
“vue-property-decorator”: “^8.1.0”,
“vue-router”: “^3.0.3”,
“vuex”: “^3.0.1”
},
“devDependencies”: {
“@types/chai”: “^4.1.0”,
“@types/mocha”: “^5.2.4”,
“@vue/cli-plugin-babel”: “^3.8.0”,
“@vue/cli-plugin-eslint”: “^3.8.0”,
“@vue/cli-plugin-typescript”: “^3.8.0”,
“@vue/cli-plugin-unit-mocha”: “^3.8.0”,
“@vue/cli-service”: “^3.8.0”,
“@vue/eslint-config-airbnb”: “^4.0.0”,
“@vue/eslint-config-typescript”: “^4.0.0”,
“@vue/test-utils”: “1.0.0-beta.29”,
“babel-eslint”: “^10.0.1”,
“chai”: “^4.1.2”,
“eslint”: “^5.16.0”,
“eslint-plugin-vue”: “^5.0.0”,
“less”: “^3.9.0”,
“less-loader”: “^5.0.0”,
“typescript”: “^3.4.3”,
“vue-template-compiler”: “^2.6.10”
}
}

router.ts

import vue.js from ‘vue’;
import Router from ‘vue-router’;
import Home from ‘./views/Home.vue’;
import Demo from ‘./components/Demo.vue’;

Vue.use(Router);

export default new Router({
mode: ‘history’,
base: process.env.BASE_URL,
routes: [
{
path: ‘/‘,
name: ‘home’,
component: Home,
},
{
path: ‘/demo’,
name: ‘demo’,
component: Demo,
},
{
path: ‘/about’,
name: ‘about’,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: “about” */ ‘./views/About.vue’),
},
],
});

Demo.vue

<template>
<div class=”demo”>
<h1>{ title }</h1>
{ dpanel }
</div>
</template>

<script lang=”ts”>
import { Component, Prop, vue.js } from ‘vue-property-decorator’;
import { Widget, DockPanel } from ‘@phosphor/widgets’;

@Component
export default class Demo extends vue.js {
@Prop() private title!: string;

// apparently with typescript variant of vue, instance variables
// are the equivalent of the vue.js ‘data’ object’s attributes…
dpanel:DockPanel = new DockPanel();

components:any

constructor() {
super();
this.components = {
DockPanel,
};
}

mounted() {
const widget1 = new Widget();
widget1.addClass(‘content’);
widget1.addClass(‘blue’);
widget1.title.label = ‘Blue’;
widget1.title.closable = true;

const widget2 = new Widget();
widget2.addClass(‘content’);
widget2.addClass(‘red’);
widget2.title.label = ‘Red’;
widget2.title.closable = true;

this.dpanel.id = ‘main’;

this.dpanel.addWidget(widget1);
this.dpanel.addWidget(widget2);
this.dpanel.update();
console.log(‘*** this actually ran’);
}

static setupPanels():void {
}
}
</script>

<!– Add “scoped” attribute to limit CSS to this component only –>
<style scoped lang=”less”>
.content {
border: 1px solid black;
min-width: 50px;
min-height: 50px;
}

.red {
background: #E74C3C;
}

.yellow {
background: #F1C40F;
}

.green {
background: #27AE60;
}

.blue {
background: #3498DB;
}

.p-DockTabPanel {
padding-right: 2px;
padding-bottom: 2px;
}

.p-DockTabPanel > .p-StackedPanel {
padding: 10px;
background: white;
border: 1px solid #C0C0C0;
border-top: none;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.p-DockPanel-overlay {
background: rgba(255, 255, 255, 0.6);
border: 1px dashed black;
}

.p-DockPanel-overlay.p-mod-root-top,
.p-DockPanel-overlay.p-mod-root-left,
.p-DockPanel-overlay.p-mod-root-right,
.p-DockPanel-overlay.p-mod-root-bottom,
.p-DockPanel-overlay.p-mod-root-center {
border-width: 2px;
}

.p-TabBar {
min-height: 24px;
max-height: 24px;
}

.p-TabBar-header {
display: none;
}

.p-TabBar-footer {
flex: 0 0 1px;
background: #C0C0C0;
}

.p-TabBar-content {
min-width: 0;
align-items: flex-end;
}

.p-TabBar-tab {
flex: 0 1 125px;
min-height: 20px;
max-height: 20px;
min-width: 35px;
margin-left: -1px;
border: 1px solid #C0C0C0;
border-bottom: none;
padding: 0px 10px;
background: #E5E5E5;
font: 12px Helvetica, Arial, sans-serif;
}

.p-TabBar-tab:first-child {
margin-left: 0;
}

.p-TabBar-tab.p-mod-current {
min-height: 23px;
max-height: 23px;
background: white;
transform: translateY(1px);
}

.p-TabBar-tab:hover:not(.p-mod-current) {
background: #F0F0F0;
}

.p-TabBar-tabIcon,
.p-TabBar-tabText,
.p-TabBar-tabCloseIcon {
line-height: 20px;
}

.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
margin-left: 4px;
}

.p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:before {
content: ‘\f00d’;
font-family: FontAwesome;
}

.p-TabBar-tab.p-mod-drag-image {
min-height: 23px;
max-height: 23px;
min-width: 125px;
border: none;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
transform: translateX(-40%) translateY(-58%);
}

What’s causing this error, and how do I resolve it (so I can correctly render the widgets for example, as shown here)?

Solution :

I’m not familiar with PhosphorJS, so I can only provide an explanation of what’s going on.

It looks like you’re trying to render a DockPanel instance in the template by doing { dpanel }. This won’t work. This “mustache syntax” is for rendering basic data types like strings and numbers, if you render an object in this way then vue.js will render the JSON representation of that object by calling JSON.stringify on it; in this case the dpanel object contains circular references so this will fail.

I just skimmed the PhosphorJS docs. It looks like PhosphorJS is not a vue.js component library, so you’ll have to insert the DockPanel node into the DOM yourself, probably in the mounted hook.

mounted() {
this.$el.appendChild(this.dpanel.node)
},

destroyed() {
this.dpanel.dispose()
}

Again, I’m not familiar with PhosphorJS so this might not be the most correct advice.

[Vue.js] VS Code - enable autoClosingTags option in .vue filesFeatures Subscribe to RSS

The html.autoClosingTags option in VS code lets me type ‘’ - and voila, ‘’ is now inserted with the cursor inside those two tags. But this only works in .html files.
Im working on a vue.js project, and would like this feature to also be available in my .vue.js files (and any other files with html content actually).

Is this possible?

Solution :

Use the Auto Close Tag extension:

This extension is enabled for other languages like XML, PHP, Vue, JavaScript, TypeScript, JSX, TSX and so on. It is configurable.

Features

Automatically add closing tag when you type in the closing bracket of the opening tag
After closing tag is inserted, the cursor is between the opening and closing tag
Set the tag list that would not be auto closed
Automatically close self-closing tag
Support auto close tag as Sublime Text 3
Use Keyboard Shortcut or Command Palette to add close tag manually

[Vue.js] Javascript async function returns Subscribe to RSS

Async function returns [object Promise] but desired behavior is returning real value.
I can get the value from console.log.

I guess it is a expected behavior of the function but there is no idea to how to fix my code.

This is in vue.js code using electron-vue.js and NeDB.

<template>
<div>
{ testNedb3(‘NDId6sekw6VYLmnc’) //this is a test by adding specific id }
</div>
</template>

<script>
import Promise from ‘bluebird’
export default {
methods: {
dbFindAsync2: function (db, opt) {
return new Promise(function (resolve, reject) {
db.find(opt, function (err, doc) {
if (err) {
reject(err)
} else {
resolve(doc)
}
})
})
},
testNedb3: async function (id) {
const flattenMemAsync = function (arr) {
return new Promise(function (resolve) {
Array.prototype.concat.apply(
[],
arr.map(function (arr) {
resolve(arr.members)
})
)
})
}
const filterByNameIdAsnc = function (arr) {
return new Promise(function (resolve) {
const result = arr.filter(function (member) {
return member.nameId === id
})
resolve(result)
})
}
this.dbFindAsync2(
this.$db, { ‘members.nameId’: id }, { ‘members’: 1, _id: 0 }
).then(function (res) {
const docs = res
flattenMemAsync(docs).then(function (res) {
const flatMembers = res
filterByNameIdAsnc(flatMembers).then(function (res) {
console.log(‘result’, res)
console.log(‘result_firstname’, res[0].firstName)
return res
})
})
})
},

this.$db is getting data from NeDB and the data is two-dimensional array, so when trying to flat the array by flattenMemAsync and remove unexpected data by filterByNameIdAsnc.

console.log(‘result’, res) returns array and console.log(‘result_firstname’, res[0].firstName) returns string.

there is changed calling code from { testNedb3(‘NDId6sekw6VYLmnc’) } to { { testNedb3(‘NDId6sekw6VYLmnc’).then(value => {return value}) } but the result is same.

Also changed to { await testNedb3(‘NDId6sekw6VYLmnc’).then(value => {return value}) } but I got error “Parsing error: Cannot use keyword ‘await’ outside an async function.”.

Any comment can help me.
Thank you.

Solution :

Don’t call an async method within a view.

When you mark the method as async it will return a promise, so, its pointless to return a promise and mark it as async at same time.

You should await the async method or promise from created or some other suitable lifecycle hook and save the result in components data, then render that data.

Also, take a look at vue-promised plugin.

[Vue.js] How can I add an href to a q-table (Quasar Data Table)? Subscribe to RSS

there is put a q-table in my page to show my data. this is work correctly. to put an href in first column and another in last column. You should can click on them to go to other pages for showing details row and edit row Respectively.

Title: go to page /#/offer/uuid

Edit: go to page /#/account/offers/edit/uuid

<template>
<q-page>
<div class=”row justify-center”>
<q-table
:data=”data”
:columns=”columns”
row-key=”id”
selection=”single”
:selected.sync=”selected”
:filter=”filter”
:loading=”loading”
\>
</q-table>
</div>
</div>
</q-page>
</template>

<script>
…..
columns: [
{
name: ‘title’,
required: true,
label: ‘Title’,
align: ‘left’,
field: row => row.title,
sortable: true,
format: val => ‘<a href=”/offer/“>’ + val + ‘</a>’ //this is not work
},
{
name: ‘category’,
label: ‘Category’,
field: ‘category’,
sortable: true
},
{
name: ‘payment’,
label: ‘Payment’,
field: ‘payment’
},
{
name: ‘action’,
label: ‘Edit’,
field: ‘key’,
format: val => ‘<a href=”/account/offers/edit/“>’ + val + ‘</a>’ //this is not work
}
]
…..
</script>

Solution :

This answer assumes Quasar 1.0.0-rc4. For earlier versions it may look a bit different but the crux of it is that you need to use scoped slots.

There are scoped slots called body-cell-[name] that can be used to render content that isn’t plain text. Here the [name] portion should match the name for the corresponding column in the columns definition.

<q-table …>
<template v-slot:body-cell-title=”cellProperties”>
<q-td :props=”cellProperties”>
<a href=”#/offer/“>{ cellProperties.value }</a>
</q-td>
</template>
<template v-slot:body-cell-action=”cellProperties”>
<q-td :props=”cellProperties”>
<a href=”#/account/offers/edit/“>{ cellProperties.value }</a>
</q-td>
</template>
</q-table>

My use of v-slot assumes vue.js 2.6.0+, for earlier versions you would use slot and slot-scope instead.

You haven’t explained where the UUID part of the URL comes from so I haven’t included that in the code above. I would imagine it is included somewhere in the row data, so in practice you would need something like :href=”‘#/offer/‘ + encodeURIComponent(cellProperties.row.uuid)”.

If you’re using a routing library such as vue.js Router then there are alternatives to building URLs directly within <a> tags. You may wish to investigate further before sprinkling hand-crafted URLs throughout the application code. However, the use of scoped slots is likely to remain no matter how you implement the links.

[Vue.js] Text in paragraph is only vertically centered in flexbox when omitting it's <p> tag, what's the reason behind it? Subscribe to RSS

When looking at the following Vuetify code

<v-layout align-center justify-center row fill-height>
<v-flex xs1>
<v-icon color=”primary”>clear</v-icon>
</v-flex>
<v-flex xs8>
<p>Text</p>
</v-flex>
<v-flex>
<v-btn rounded color=”primary”>Do Something!</v-btn>
</v-flex>
</v-layout>

(for more context:
https://codepen.io/anon/pen/xNvzbQ)

“Text” is not vertically centered

But when replacing

<v-flex xs8>
<p>Text</p>
</v-flex>

with

<v-flex xs8>
Text
</v-flex>

it suddenly is.

I also could not center it with align-items: center or align-content: center in the surrounding div.

Whats the reason behind this behavior?

Solution :

It IS actually centering the p tag. Like other’s has pointed out. The p tag has a default bottom margin, so it just makes it look as if it’s not centered vertically.

See below image, where the orange highlight is actually the bottom margin of the p tag.
Notice how it’s actually vertically centered.

So, you can fix this by either:

Remove the p tag altogether like you said
Use div tag instead, which doesn’t have a margin
Just set the style of the p tag to have margin-bottom: 0

[Vue.js] Can't use vuetify variables in nuxt.js project Subscribe to RSS

Trying to create a new component style using the $display-breakpoints stylus variabled from Vuetify (as described in this answer) but it doesn’t seem to work.

<style lang=”stylus”>
.submit-container
@media $display-breakpoints.sm-and-up
font-size 5em
</style>

I get the following error:

$display-breakpoints has no property .sm-and-up

Solution :

I needed to import the variables stylus file:

<style lang=”stylus”>
@import ‘../../assets/style/variables.styl’
.submit-container
@media $display-breakpoints.sm-and-up
color #ef4655;
</style>

[Vue.js] First img tag shows an image, second one which uses interpolation does not in Vue.js Front End Subscribe to RSS

there is 2 img tags:

<img src=”@/assets/img/profileicon/3867.png”/>
<img :src=”‘@/assets/img/profileicon/‘ + this.summonerInfo.profileIconId + ‘.png’”>

this.summonerInfo.profileIconId stores the 3867 number which means both img tags should display the same image, however, the first one displays an image and the second one doesn’t. When I inspect, the first img src leads to “/img/3867.png” and the second img src leads to “@/assets/img/3867.png”

From my root folder, the folder structure is like this:

src->assets->img->profileicon

Any idea why is the second img tag not displaying any image?

Solution :

copy image to ‘/public/img’ folder in root project

<img src=”/img/profileicon/3867.png”/>

[Vue.js] HighCharts Vue JS - CSV key Subscribe to RSS

I’m using csv-loader from webpack to load my CSV file and it loads fine on my vue.js JS app.

The data.csv key is populated but the chart is not displayed.
App is being served locally.

<template>
<div id=”app”>
<img src=”./assets/logo.png”>
<highcharts :options=”chartOptions”></highcharts>
</div>
</template>

<script>
import {Chart} from ‘highcharts-vue’
import csvPath from ‘./assets/test.csv’
import Papa from ‘papaparse’

export default {
name: ‘app’,
components: {
highcharts: Chart
},

data () {
return {
chartOptions: {
chart: {
type: ‘column’
},
data: {
csv: csvPath
},
title: {
text: ‘Fruit Consumption’
},
yAxis: {
title: {
text: ‘Units’
}
}
}
}
},

CSV File

Categories,Apples,Pears,Oranges,Bananas
John,8,4,6,5

I expect to see a fully plotted graph (barchart).

Solution :

Try to import and initialize the data Highcharts module like that:

import Highcharts from “highcharts”;
import dataModule from “highcharts/modules/data”;

dataModule(Highcharts);

[Vue.js] My conditional class bind is binding the class to everything iterated in my object. What have I done wrong? Subscribe to RSS

there is returned an object from an API call to Last.FM that returns an object of the last 100 songs I listened to. If one is currently playing there is a nowplaying flag on the first item in the object.

I’m trying to bind a class to the markup if this is the case, and I’m close. The only problem is if the condition is met it’s instead binding the class to everything iterated from my object.

What have I done wrong?

To understand here is an example snippet from the returned object

{
“artist”: {
“mbid”: “9457a08d-a2d0-4f2d-9876-b8870612d54f”,
“#text”: “The Last Poets”
},
“@attr”: {
“nowplaying”: “true”
},
“mbid”: “3066a862-6c9a-4e21-b6bd-53e43257cbb4”,
“album”: {
“mbid”: “96e8dd6c-6b49-462e-a6ea-202a3e2b1116”,
“#text”: “Understand What Black Is”
},
“streamable”: “0”,
“url”: “https:\/\/www.last.fm\\/music\\/The+Last+Poets\\/\_\\/Understand+What+Black+Is",
“name”: “Understand What Black Is”
},
{
“artist”: {
“mbid”: “77b29df2-056e-409e-a1b2-5e2bbfe421c4”,
“#text”: “Awolnation”
},
“album”: {
“mbid”: “1f7c0747-0207-441d-acad-a55ec0530b1f”,
“#text”: “Back From Earth”
},
“streamable”: “0”,
“date”: {
“uts”: “1560027115”,
“#text”: “08 Jun 2019, 20:51”
},
“url”: “https:\/\/www.last.fm\\/music\\/Awolnation\\/\_\\/Sail",
“name”: “Sail”,
“mbid”: “0960742a-7040-435e-a2ef-c11abec3b913”
}

and in the markup there is iterated over my object like this

<li v-for=”(track, index) in recentTracks” :key=”`track-${index}`“ class=”track” v-bind:class=”‘track-‘ + index” style=”background-image: url(‘http://www.placecage.com/100/100')">
<span v-bind:class=”{ ‘playing’: 'track.@attr.nowplaying‘ }”>{track.artist[‘#text’]} - {track.name}</span>
</li>
</ul>

Which results in every li having the class of playing

Solution :

It seems like you’ve wrapped track.@attr.nowplaying in ‘, which makes it evaluate it as a string (and hence, always evaluates as true, giving ALL items the class of playing). Try removing the ‘.

<li v-for=”(track, index) in recentTracks” :key=”`track-${index}`“ class=”track” v-bind:class=”‘track-‘ + index” style=”background-image: url(‘http://www.placecage.com/100/100')">
<span v-bind:class=”{ ‘playing’: track.@attr.nowplaying }”>{track.artist[‘#text’]} - {track.name}</span>
</li>
</ul>

Solution 2:

To get this working without modifying the data it would be this:

<span :class=”{ playing: track[‘@attr’] && track[‘@attr’].nowplaying }”>

The quotes around 'track.@attr.nowplaying‘ were causing it to be treated as a string, which is considered truthy for all items.

Simply removing the quotes won’t work because the @ symbol cannot appear in a token (unlike the symbols $ and _, which can). So you need to use the square bracket form to access the property.

This still won’t work because not all of the items have the @attr property. For those that don’t, track[‘@attr’] will be undefined and trying to access nowplaying will result in an error. I’ve added an extra check for that to the start of my expression.

I also made a couple of incidental changes, using :class instead of v-bind:class and playing instead of ‘playing’. Neither is required to get it to work.

This data appears to be XML converted to JSON, with the result being that it isn’t particularly clean JSON. If it were me I think I’d do some manipulation to get the data into a nicer form before attempting to use it within the UI. e.g. Renaming properties and applying proper types where appropriate.