link548 link549 link550 link551 link552 link553 link554 link555 link556 link557 link558 link559 link560 link561 link562 link563 link564 link565 link566 link567 link568 link569 link570 link571 link572 link573 link574 link575 link576 link577 link578 link579 link580 link581 link582 link583 link584 link585 link586 link587 link588 link589 link590 link591 link592 link593 link594 link595 link596 link597 link598 link599 link600 link601 link602 link603 link604 link605 link606 link607 link608 link609 link610 link611 link612 link613 link614 link615 link616 link617 link618 link619 link620 link621 link622 link623 link624 link625 link626 link627 link628 link629 link630 link631 link632 link633 link634 link635 link636 link637 link638 link639 link640 link641 link642 link643 link644 link645 link646 link647 link648 link649 link650 link651 link652 link653 link654 link655 link656 link657 link658 link659 link660 link661 link662 link663 link664 link665 link666 link667 link668 link669 link670 link671 link672 link673 link674 link675 link676 link677 link678 link679 link680 link681 link682 link683 link684

[Vue.js] CORS problem with VueJS using axios or vue-resource Subscribe to RSS

I’m working on a SPA website using VueJS, there is a problem when vue-ressource performs http requests to an external API.

here is an example of console output :

Access to XMLHttpRequest at ‘https://backoffice.warmango.fr/api/v1/catalog/products/7424' from origin ‘https://sandbox.warmango.fr' has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header has a value ‘https://v3.warmango.dev' that is not equal to the supplied origin.

But when I open the console (with Disable cache ckecked)
the problem disappears and I can navigate normally…

It is very frustrating, is there a cache problem with VueJS ?

Solution :

Have you tried to specify crossdomain to true?

axios.get(url, { crossdomain: true })

Source : https://github.com/axios/axios/issues/853#issuecomment-322954804

[Vue.js] Uncaught ReferenceError process is not defined vuejs, vuex , Webpack SSR Subscribe to RSS

getting error when i define production configuration in webpack

Error:

Uncaught ReferenceError: process is not defined

code like
console.log(process)

process.env.NODE_ENV === “production”

if (process.env.NODE_ENV === “production”) {
module.exports.devtool = “#source-map”;
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
“process.env”: {
NODE_ENV: ‘“production”‘
}
})

Solution :

its worked for me when i add in Webpack.base.js — libraryTarget: ‘commonjs2’– like change from

(Webpack.js or Webpack.base.js or Webpack.config.js)

output: {
path: path.resolve(__dirname, “./dist”),
publicPath: “/dist/“,
filename: “build.js”
}

to

output: {
path: path.resolve(__dirname, “./dist”),
publicPath: “/dist/“,
filename: “build.js”,
libraryTarget: ‘commonjs2’
},

libraryTarget: ‘commonjs2’
//this option allows users to insert comments within the export wrapper. To insert the same comment for each libraryTarget type, set auxiliaryComment to a string:
read more

[Vue.js] $.getJSON execution issue json to array is populated but not usedSorry about the badly formatted code, still learning what i'm doing here Subscribe to RSS

I’m currently trying to take in data from a json file hosted on a server, this data is then put in a global array which is then used later in vue.js to loop through the list.

Currently what is happening is that the array is populated ie can be seen when printed to the console, but when the array is populated the length is then LATER listed as 0, even though when printed the array is populated, note that using array[…] the value comes out as undefined

This is better seen with the image below

there is tried setting up a breakpoint and passing through line by line. This goes through the scripts in the RIGHT order, showing the actual length of the array but still will not work (potential other issue, not an issue now).

there is checked and inside the html the script calls are in the right order ie the json pull is done BEFORE main.js(vue) is called

This worked when pulling from local storage also, the only thing that changed was now the json is being pulled from a server instead of the users session

Sorry about the badly formatted code, still learning what i’m doing here

var json = [];
$.getJSON(“https://skynet.ie/~alanfinnin/other/generated.json", function(data) {
json = data;

}).done(function() {
console.log(“Immediatly after $.getJSON pull (length) “ + json.length);

let json_length = json.length;

for(let i = 0; i < json_length; i++) {
to_add = json[i];
to_add.id = global_id_count;
full_list.push(to_add);
global_id_count++;
}
});

\>————–

for(i = 0; i < list_length; i++){`
temp_list_for_loop = [];`
increment_variable = i+1;`

console.log(“Inside loop for vue: (array length) “ + full_list.length + “ Accessing index of array: “ + full_list[1]);

for(j = 0; j < full_list_length; j++){
if(full_list[j].which_list === String(increment_variable))
temp_list_for_loop.push(full_list[j]);
}
/*
Pushes each list of elements on one at a time
*/
new Vue({
el: ‘#list_‘ + increment_variable,
data: {
tiles: temp_list_for_loop
}
})
}

I would expect that the array act populated with its length working properly,
later issues with the shelves being populated may then be solved

<br>link:
http://skynet.ie/~alanfinnin/stack\_oberflow/js\_drag\_and\_drop/
<br>json pull: http://skynet.ie/~alanfinnin/other/js\_drag\_and\_drop/js/object\_input.js
<br>vue:
http://skynet.ie/~alanfinnin/other/js\_drag\_and\_drop/main.js
<br>Image of console:
http://skynet.ie/~alanfinnin/stack\_overflow/console\_log.PNG

Solution :

Trying to see if i can help you out here but I get the sense you are introducing needless complexity because of the way you use vue.js in the examples. Why dont you mount vue.js and handle the $.getJson inside it. This will make things easier to comprehend and might solve some issues with context and scope that you are running into. Something along the lines of:

new Vue({

#el: ‘#some_element’,
data() {
return {
json: {}.

}
},
methods: {
getJson() {
$.getJSON(“https://skynet.ie/~alanfinnin/other/generated.json", (data) => this.json = data;)
}
},
mounted() {
this.getJson();
},
})

mounted will run as soon as the vue.js app is mounted to the dom, it will then fire the getJson method defined in the method blocked, wich will execute the fetch and copy the resulting data to the local vue.js scope. You can then carry on executing / transforming the data from there, but it will really simplify the control flow.

best of luck!

[Vue.js] Why does my vue.js button not create a new textarea? Subscribe to RSS

when working on my first Web App using vue.js and to have a button that will create a new textarea when clicked. It seems to work fine when I checked it at jsfiddle, but when I load it in visual studio and run it, I do not get any results and the textarea and button do not display.

<!– HTML –>
<div id=”column1” style=”float:left; margin:0; width:25%;”>
<h4>Column Header</h4>
<div id=”tile”>
<input type=”button” value=”+” @click=”addInput”>
<div class=”inputArea” v-for=”input in inputs” :key=”input.id”>
<textarea placeholder=”Enter text… “ :id=”input.id” v-model=”input.value”></textarea>
</div>
</div>
</div>

/* Vue.js on my main.js */
var tile = new Vue({
el: ‘#tile’,
data: {
counter: 0,
inputs: [{
id: ‘text0’,
value: ‘’,
}],
},
methods: {
addInput() {
this.inputs.push({
id: ‘text${++this.counter}’,
value: ‘’,
});
}
}
});

I expected a textbox to be created each time the button is pressed. The textbox should appear beneath the previous one. What is happening though is I don’t see either the button or any textboxes. Thanks in advance for taking the time to consider this!

Solution :

data property must be a function (returning object). Otherwise it’s initialised only once on first render.

Change it to this and it should work:

data() {
return {
counter: 0,
inputs: [{
id: ‘text0’,
value: ‘’,
}],
}
}

And also, when using template literals, you have to use back-ticks ( ` ), so the method should be:

addInput() {
this.inputs.push({
id: `text${++this.counter}`,
value: ‘’,
});
}

Solution 2:

Try to do this:

methods: {
addInput() {
let obj = {
id: this.counter,
value: ‘’,
}
this.inputs.push(obj);
this.counter++;
}
}

[Vue.js] Close bootstrap-vue modal with typescript Subscribe to RSS

there is a bootstrap-vue.js modal and try to close it in my click-function.

this.$refs[‘my-modal’].hide()

but get the following error:

Property ‘hide’ does not exist on type ‘vue.js | Element | Vue[] | Element[]‘.
Property ‘hide’ does not exist on type ‘Vue’

I tried with jquery also

$(‘#my-modal’).modal(‘hide’);

With error:

Property ‘modal’ does not exist on type ‘JQuery<HTMLElement>’

Solution :

With the latest version of Bootstrapvue.js (2.0.0-rc.21 +), you can use the newer this.$bvModal.hide(id) method to close a modal with the specified id. $bvModal is typed, so it should work fine with Typescript.

Solution 2:

When refs are not working for me in Vue+Typescript, I sometimes cast the ref to an HTMLElement or disable type checking by using any.

(this.$refs[‘my-modal’] as HTMLElement).hide()
(this.$refs[‘my-modal’] as any).hide()

[Vue.js] Why modal in bootstrap is not covering the whole area? Subscribe to RSS

I’m trying to open a modal for form fill up in Vue.Js using Bootstrap, but the modal content is not covering the whole modal, just a small part.

there is also used Google’s Materialize CSS with Boostrap (for reasons), and have tried removing the Materialize CSS cdns but the problem is something else.

Code for modal:

<div class=”modal fade” id=”exampleModal” tabindex=”-1” aria-labelledby=”exampleModalLabel” aria-hidden=”true”>
<div class=”modal-dialog” >
<div class=”modal-content”>
<div class=”modal-header”>
<div class=”form-group”>
<label for=”recipient-name” class=”col-form-label”>Title:</label>
<input type=”text” class=”form-control” id=”recipient-name” v-model=”title”>
</div>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div class=”modal-body”>
<form>
<!– <div class=”form-group”>
<label for=”recipient-name” class=”col-form-label”>Title:</label>
<input type=”text” class=”form-control” id=”recipient-name” v-model=”title”>
</div> –>
<div class=”form-group”>
<label for=”message-text” class=”col-form-label”>Content:</label>
<textarea class=”form-control” id=”message-text” v-model=”content” rows=”5”></textarea>
</div>
</form>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary” @click=”saveChanges()”>Save Note</button>
</div>
</div>
</div>
</div>

i did not style it
but the order in which cdns for boostrap and materilize css

<link href=”https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap" rel=”stylesheet”>
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>
<link rel=”stylesheet” href=”node_modules/firebaseui/dist/firebaseui.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>
<script src=”https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>
<script src=”/node_modules/vue-cookie/build/vue-cookie.js’”></script>

Solution :

The issue is Materialize CSS.. This line: <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

[CodePen Mirror]

<link href=”https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap" rel=”stylesheet”>
<link href=”https://fonts.googleapis.com/icon?family=Material+Icons" rel=”stylesheet”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity=”sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm” crossorigin=”anonymous”>
<!–link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"-->
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>
<script src=”https://www.gstatic.com/firebasejs/4.3.0/firebase.js"></script>

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#exampleModal”>
Launch demo modal
</button>
<div class=”modal fade” id=”exampleModal” tabindex=”-1” aria-labelledby=”exampleModalLabel” aria-hidden=”true”>
<div class=”modal-dialog”>
<div class=”modal-content”>
<div class=”modal-header”>
<div class=”form-group”>
<label for=”recipient-name” class=”col-form-label”>Title:</label>
<input type=”text” class=”form-control” id=”recipient-name” v-model=”title”>
</div>
<button type=”button” class=”close” data-dismiss=”modal” aria-label=”Close”>
<span aria-hidden=”true”>×</span>
</button>
</div>
<div class=”modal-body”>
<form>
<!– <div class=”form-group”>
<label for=”recipient-name” class=”col-form-label”>Title:</label>
<input type=”text” class=”form-control” id=”recipient-name” v-model=”title”>
</div> –>
<div class=”form-group”>
<label for=”message-text” class=”col-form-label”>Content:</label>
<textarea class=”form-control” id=”message-text” v-model=”content” rows=”5”></textarea>
</div>
</form>
</div>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
<button type=”button” class=”btn btn-primary” @click=”saveChanges()”>Save Note</button>
</div>
</div>
</div>
</div>

[Vue.js] How to toggle class in vue js of a specific item in v-for Subscribe to RSS

How can i toggle by btn specific div from list of items , which one i got from json and display using v-for ?

when understand that i can`t just set v-if to div and add to vue.js data , but in this case it fill open and close all divs

<div class=”about” v-if=”list”>
<div class=”dat” v-for=”data in item.items_situation” :key=”data.a”>
{data.doc_valid_through}
{data.document_type}
{data.item_nr_full}
{data.item_text}
</div>
<div class=”situation-btn”>
<input class=”situatuin-btn” type=”submit” value=”” v-on:click=”hide”>
</div>
</div>

When i click the button to toggle one div not all

Solution :

There are many ways to achieve this, I’ll provide one for you.

Map the JSON array in data by adding visible property for every item.
Add button inside loop (so its attached for every item) and make visible = false by clicking it.
Display filtered results (visible === true only)

new Vue({
el: “#app”,

data: {
items: [
{ text: “Learn JavaScript”, id: 1 },
{ text: “Learn Vue”, id: 2 },
{ text: “Play around in JSFiddle”, id: 3 },
{ text: “Build something awesome”, id: 4 }
].map(item => ({…item, visible: true})),

hiddenItems: []
},

computed: {
visibleItems() {
return this.items.filter(item => item.visible)
}
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>
<div class=”dat” v-for=”item in visibleItems” :key=”item.id”>
{item.text}
<button v-on:click.prevent=”item.visible = false”>X</button>
</div>
</div>

Solution 2:

You can use v-bind:class to dynamically add class to elements. Code should be like this:

<div class=”about” v-if=”list”>
<div v-for=”data in items” v-bind:class=”{hide: data.isHidden}” :key=”data.key”>
Something
</div>
<div class=”situation-btn”>
<input class=”situatuin-btn” type=”submit” value=”” v-on:click=”hide”>
</div>
</div>

Then in hide

hide(){
this.items[i].isHidden = true
}

The data.isHidden property decides whether an element in list should have hide class.
See also Class and Style Bindings.

-——Edited——-

there is posted an example here

[Vue.js] Bootstrap-vue table _showdetails closes when data is updated Subscribe to RSS

there is a bootstrap-vue.js table, which is bound to a computed property that fetches some data from my vuex store.

Each row has a show_details button, which opens a second row as per this link:
https://bootstrap-vue.js.org/docs/components/table/#row-details-support

However when the data changes in my vuex store, the table re-renders and looses its state (all of the opened ‘show_details’ rows go back to closed).

Is there any way to update the table data in the store and the table, without loosing the table’s current state?

Solution :

Once receiving the new data from the back-end, before updating the store, you could loop through the old table items array looking for the _showDetails property, and then update the new data array setting _showDetails if the rows are the same (say by using a primary key or other unique row identifier to correlate the rows). Then update the store items array with the new data.

[Vue.js] Invalid prop type check failed error in VueJS Subscribe to RSS

when trying to use a component named CardRenderer.vue.js which renders card using array of Objects. when using the same component again & again to render the data. when having this error “[vue.js warn]: Invalid prop: type check failed for prop “renderData” when I tried passing prop from component.

I tried passing different values and different types but it did’nt work.

Here is the code:

CardRenderer.vue

<template lang=”html”>

<div>
<b-container class=”bv-example-row”>
<b-row v-for=”(row, i) of rows” v-bind:key=”i”>
<b-col v-for=”(item, j) of row” v-bind:key=”j” >

<!– you card –>
<b-card
:title=”item.title”
img-src=”item.icon”
img-alt=”Image”
img-top
tag=”article”
style=”max-width: 20rem;”
class=”mb-2”
\>
<b-card-text>
<h1>{item.name}</h1>
<pre>{item.description}</pre>
</b-card-text>
<b-button :href=”‘/dashboard/‘+item.name” variant=”primary”>More</b-button>
</b-card>
</b-col>
</b-row>
</b-container>
</div>

</template>

<script lang=”js”>
export default {
name: ‘CardRenderer’,
props: {
renderData: []
},
data() {
return {
rows: null
}
},
mounted() {

const itemsPerRow = 3
let rowss = []
let arr = this.renderData
// eslint-disable-next-line
// console.log(this.renderData)
for (let i = 0; i < arr.length; i += itemsPerRow){
let row = []
for (let z = 0; z < itemsPerRow; z++) {
row.push(arr[z])
}
rowss.push(row)
}

this.rows = rowss

// eslint-disable-next-line
console.log(this.rows)

},

methods: {

},
computed: {
// rows() {
// }

}
}
</script>

<style scoped>

</style>

CardGrouper.vue:

<template lang=”html”>

<div class = “full” >

<div class=”h-50” style=” background-color: #C8544F”>
<h1 align=”center”>{$store.getters.responseAPI.title} </h1>

<CardRenderer :renderData=this.$store.getters.responseAPI.apps />
</div>

</div>

</template>

<script>
import CardRenderer from “./CardRenderer.vue”
/* eslint-disable */
export default {
name: ‘CardGrouper’,
components: {
CardRenderer
},
props: [],
mounted() {

},
data() {
return {

}
},
methods: {

},
computed: {

}
}
</script>

<style scoped >
.full{
width: 100vw;
height: 90vh;
background: linear-gradient(to bottom, Red 30%, white 50%);
}
</style>

Something.vue

<template lang=”html”>
<!– <h1>Something</h1> –>
<CardRenderer :renderData=valObj />
</template>

<script lang=”js”>
import CardRenderer from ‘./CardRenderer’

export default {
name: ‘something’,
components: {
CardRenderer
},
props: [],

data() {
return {
valObj: []
}
},
mounted() {
let key = this.findUrl()
let value = this.$store.getters.responseAPI.apps.filter((elem) => {
if(elem.name == key) return elem.apps
})

if (value.length > 0)
this.valObj = value[0].apps
//eslint-disable-next-line
console.log(this.valObj)
},
methods: {
findUrl() {
let url = window.location.pathname.split(“/“).slice(-1)[0];
return url
}
},
computed: {

}
}
</script>

<style scoped >
.something {

}
</style>

when having this error.
It looks like this.

This is the data when passing as a prop from Something.vue

This is how value looks like

Error is being generated somewhere from Something.vue.
when passing array of objects as a prop.
How do i rectify this error, to make it work.

Solution :

Set the renderData type as Array and default value to []:

props: {
renderData: {
type: Array,
deafult: () => []
}
}

Solution 2:

It appears that you are defining the renderData prop as an array [] but probably are passing an object to it or something.

Either simplify it and do…

props: [‘renderData’]

Or if you are passing an object to it do..

props: {
renderData: {
type: Object,
}
}

If it is an array of objects do..

props: {
renderData: {
type: Array,
default: () => [{}];
}

[Vue.js] Why am I getting undefined is not an object error in vue js Subscribe to RSS

So there is a vue.js app I wrote on a single page .html being served by django made up of a a couple components. when now trying to transfer this work into a real vue.js project using the vue.js CLI and I figured it would be pretty trivial to move my components from the django .html page into single file vue.js components. Unfortunately pretty much every line within my single file component is throwing errors (despite my entire app and all its components working in the .html) and I’m having a real rough time figuring this out. It seems as though transitioning from a vue.js component to a single file component requires some work.

The current error I’m getting is this:

[vue.js warn]: Error in render: “TypeError: undefined is not an object (evaluating ‘this.milliseconds = parseInt(duration % 1000 / 100)’)”

For reasons that aren’t entirely clear to me, as soon as I moved to single file component using vue.js CLI - every line errored out until I added ‘this’ before every variable. there is very little understanding of why I would need to use ‘this’ in a filter method, but when I remove it I get:

[vue.js warn]: Error in render: “ReferenceError: Can’t find variable: milliseconds”

single file component:

<template>
<div emptyDiv>
<h3> Stages </h3>
<table :style=”tableStyle”>
<tbody>
<template v-for=”item in jobs”>
<tr>
<td v-for=”stage_execution in item.stage_execution” :title=”stage_execution.exec_node.name” :key=”stage_execution.stage.name”>
<b><a :href=”item.mongo_link + stage_execution.stage.name + ‘.txt’” style=”color:black”>{ stage_execution.stage.name }</a></b>
<br>
{ stage_execution.duration_millis | durationReadable }
<br>
{ stage_execution.status.name }
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>

<script>
import moment from ‘moment’;

export default {
data() {
return {
jobs: []
}
},
computed: {
tableStyle() {
return {
‘background-color’: ‘#f9f9f9’,
‘border-color’: ‘#C0C0C0’,
‘padding’: ‘8px’,
‘width’: ‘100%’,
};
},
emptyDiv() {
return {
‘display’: ‘contents’,
};
},
},
methods: {
calculateDuration: function(time_start, time_end) {
this.theDuration = moment.duration(time_end.diff(time_start))
if (this.theDuration.seconds() == 0) {
this.cleanDuration = “N/A”
}
else {
this.cleanDuration = this.theDuration.hours() + “ hrs “ + this.theDuration.minutes() + “ min “ + this.theDuration.seconds() + “ sec”
}
return this.cleanDuration
}
},
filters: {
durationReadable: function(duration) {
console.log(parseInt(duration%1000)/100) //this successfully logs the correct duration
this.milliseconds = parseInt((duration%1000)/100)
this.seconds = parseInt((duration/1000)%60)
this.minutes = parseInt((duration/(1000*60))%60)
if (this.minutes < 10) {
this.minutes = ‘0’ + this.minutes
}
if (this.seconds < 10){
this.seconds = ‘0’ + this.seconds
}
return this.minutes + “ m “ + this.seconds + “ s “ + this.milliseconds + ‘ ms’
}
},
created() {
this.binariesEndpoint = ‘test.com’
fetch(this.binariesEndpoint)
.then(response => response.json())
.then(body => {
this.cleanStartTime = moment(body[0].time_start)
console.log(body[0].time_start)
this.cleanEndTime = moment(body[0].time_end)
this.cleanDuration = this.calculateDuration(this.cleanStartTime, this.cleanEndTime)
this.job_execs.push({
‘name’: body[0].job.name,
‘build_id’: body[0].build_id,
‘env’: body[0].job.env,
‘time_start’: this.cleanStartTime.format(‘LLL’),
‘time_end’: this.cleanEndTime.format(‘LLL’),
‘duration’: this.cleanDuration,
})
console.log(body[0].job.name)
})
.catch( err => {
console.log(‘Error Fetching:’, this.binariesEndpoint, err);
return { ‘failure’: this.binariesEndpoint, ‘reason’: err };
})
},
};
</script>

note: the log statement in durationReadable filter correctly logs the duration.

Solution :

You shouldn’t be using this within durationReadable. You just need to use let and const to declare the variables.

durationReadable (duration) {
const milliseconds = parseInt((duration%1000)/100)
const seconds = parseInt((duration/1000)%60)
let minutes = parseInt((duration/(1000*60))%60)
// … etc.
}

Solution 2:

You cannot reference this in filters.

Filters should be pure functions and not be dependent on this.

Instead, move the durationReadable function to the methods section. There you can reference this.

Then amend the template to use the method instead of the filter:

{ durationReadable(stage_execution.duration_millis) }

I hope this helps.

Solution 3:

Any time you reference this.someVariable, vue.js expects to read this from predefined data property. Example,

data: () => {
return {
milliseconds: undefined
}
}

Now this.milliseconds will be accessible.