link0 link1 link2 link3 link4 link5 link6 link7 link8 link9 link10 link11 link12 link13 link14 link15 link16 link17 link18 link19 link20 link21 link22 link23 link24 link25 link26 link27 link28 link29 link30 link31 link32 link33 link34 link35 link36 link37 link38 link39 link40 link41 link42 link43 link44 link45 link46 link47 link48 link49 link50 link51 link52 link53 link54 link55 link56 link57 link58 link59 link60 link61 link62 link63 link64 link65 link66 link67 link68 link69 link70 link71 link72 link73 link74 link75 link76 link77 link78 link79 link80 link81 link82 link83 link84 link85 link86 link87 link88 link89 link90 link91 link92 link93 link94 link95 link96 link97 link98 link99 link100 link101 link102 link103 link104 link105 link106 link107 link108 link109 link110 link111 link112 link113 link114 link115 link116 link117 link118 link119 link120 link121 link122 link123 link124 link125 link126 link127 link128 link129 link130 link131 link132 link133 link134 link135 link136

[Vue.js] Row selection and pagination - VueVue codeJavascript

Using vue, I display my database in a table.
My table contains a lot of rows. Therefore, I use pagination.
Using the select function, I can select multiple rows and store them in an array.

The problem:

I select some rows in my table. The data from the row is stored in my array called selected. I let them appear next to my table.
Using pagination, I go to the next page. My data is still stored in this array. When I now select another row. My array is emptied,
my data from my section is gone.

How can I solve this? Why does this happen? Is there a way to store this data so it isn’t lost?
Did I miss something?

Bellow, you find my code. Thanks for the help.

vue.js code

<!– Main table –>
<b-row align-v=”start”>
<b-col sm=”8”>
<b-table class=”col-sm-12”
show-empty
striped hover
selectable
stacked=”md”
:items=”values”
:fields=”fields”
:select-mode=”selectMode”
:current-page=”currentPage”
:filter=”valueSearch”
:sort-by.sync=”sortBy”
:sort-desc.sync=”sortDesc”
:sort-direction=”sortDirection”
@filtered=”onFiltered”
@row-selected=”rowSelected”

<template slot=”name” slot-scope=”row”>
{row.item.name}
</template>
<template slot=”id” slot-scope=”row”>
{ row.item.id }
</template>
<template slot=”ref” slot-scope=”row”>
{row.item.ref}
</template>
<template slot=”specific” slot-scope=”row”>
{row.item.specific}
</template>
<template slot=”iso” slot-scope=”row”>
{row.item.iso}
</template>
<template slot=”tax” slot-scope=”row”>
{row.item.tax}
</template>
<template slot=”amount” slot-scope=”row”>
<span class=’dot largerSize’ :class=”statusColor[range(row.item.amount)]“></span>
</template>
</b-table>
</b-col>
<b-col sm=”4”>
Here comes the value selected.
<div v-for=”selectedvalue in selected” :key=”selectedvalue.id”>
{ selectedvalue.id } - {selectedvalue.name}
{selected}

</div>
</b-col>
</b-row>
<!– How is sorted? & Pagnation –>
<b-row align-v=”end” class=”mb-2”>
<b-col>
Sorting By: <b>{ sortBy | capitalize }</b>, Sort Direction:
<b>{ sortDesc ? ‘Descending’ : ‘Ascending’ }</b>
</b-col>
<b-col>
<b-pagination v-model=”currentPage” :total-rows=”totalRows” :per-page=”perPage” class=”my-0”></b-pagination>
</b-col>
<b-col>One of three columns</b-col>
</b-row>

Javascript

<script>
export default {
props: [‘valuedata’,’minamount’,’maxamount’],
data() {
return {
values: this.valuedata,
statusColor: [“red”,”orange”,”green”],
totalRows: 1,
currentPage: 1,
perPage: 10,
pageOptions: [5, 10, 20, 50,100],
sortBy: “id”,
sortDesc: false,
sortDirection: ‘asc’,
filter: null,
selectMode: ‘multi’,
fixed: true,
selected: [],
fields: {
id: {
label: “Id”,
sortable: true
},
name: {
label: “Name”,
sortable: true
},
ref: {
label: “Ref”,
sortable: true
},
iso: {
label: “Iso”,
sortable: true
},
tax: {
label: “Tax”,
sortable: true
},
specific: {
label: “specific”,
sortable: true
},
amount: {
label: “amount”,
sortable: true
}
}
}
},
computed:{
hits: function(){
var hits = this.values.length
return hits
}
},
mounted () {
this.totalRows = this.values.length

},
methods: {
onFiltered(filteredItems) {
// Trigger pagination to update the number of buttons/pages due to filtering
this.totalRows = filteredItems.length
this.currentPage = 1
},
// Option: enables the storage of selected rows
rowSelected(items){
console.log(items[0].name)
this.selected = items
},
// Function: color code amount
range: function(x){
if (x < this.minamount){
return 0;
}else if(x >= this.minamount && x <= this.maxamount ){
return 1;
}else if(x >= this.maxamount ){
return 2;
}
}
},
filters: {
// Function: captitalize the first letter
capitalize: function (value) {
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}

Solution :

From my understanding, you replace all items in selected :

// Option: enables the storage of selected rows
rowSelected(items){
console.log(items[0].name)
this.selected = items
},

What you want to do is adding values, not replacing them, so IMHO what you should is something like :

// Option: enables the storage of selected rows
rowSelected(items){
console.log(items[0].name)

items.forEach(item => {
const selectedIds = this.selected.map(selectedItem => selectedItem.id);

// I guess you don’t want twice the same item in the array
if (!selectedIds.includes(item.id) {
this.selected.push(item)
}
})
},

[Vue.js] Hiding Rows After a Certain Limit of Rows Has Been Updated

I’m new to coding with a very basic understanding to Javascript. I created a table that will push an update to my tables upon clicking a button. However, i do want to limit the number of rows within my table. say for example upon pushing the sixth data to the table, i do want the first data to be removed from the row.

I tried searching everywhere with no luck. Maybe it’s because my basic understand to javascript is pretty basic. Im a newbie haha. when using vue.js for this code.

HTML

<form class=”form-inline”>
<div class=”form-group mx-sm-3 mb-2”>
<input
type=”number”
v-model=”newElement.buy”
class=”form-control”>
</div>
<button
v-on:click=”buyStock”
type=”button”
class=”btn btn-success mb-2”>BUY
</button>
</form>

<section class=”stock_tables”>
<table class=”table table-striped”>
<thead>
<tr>
<th scope=”col”>{codeBuy}</th>
<th><a v-html=”negative”></a> Buy</th>
</tr>
</thead>
<tbody>
<tr v-for=”u in stocks”>
<th></th>
<td>{u.buy}</td>
</tr>
</tbody>
</table>
</section>

Script

<script>
new Vue({
el: ‘#app’,
data: {
codeBuy: “12345”,
stocks: [],
newElement: {buy:””,sell:””}
},
methods: {
buyStock: function(){
this.stocks.push({buy:this.newElement.buy});
this.newElement = {buy:””};
}
}
});
</script>

So basically everytime i enter the amount of the stocks and press buy it will update.

Solution :

You have some options to modify the buyStock method:

this.stocks.shift()
this.$delete(this.stocks, 0)
this.stocks = this.stocks.slice(1);
this.stocks = this.stocks.slice(-5);
this.stocks = this.stocks.splice(0, 1);

or, without the if use:

this.stocks = […this.stocks, {
buy: this.newElement.buy
}].slice(-5);

Demo below:

new Vue({
el: ‘#app’,
data: {
codeBuy: “12345”,
stocks: [],
newElement: {
buy: “”,
sell: “”
},
negative: ‘’
},
methods: {
buyStock: function() {
this.stocks.push({
buy: this.newElement.buy
});
if (this.stocks.length > 5) {
// this.$delete(this.stocks, 0);
// this.stocks = this.stocks.slice(1);
// this.stocks = this.stocks.slice(-5);
// this.stocks = this.stocks.splice(0, 1);
this.stocks.shift();
}
//this.stocks = […this.stocks, {
// buy: this.newElement.buy
//}].slice(-5);
this.newElement = {
buy: “”
};
}
}
});
<script src=”https://unpkg.com/vue"></script>

<div id=”app”>
<form class=”form-inline”>
<div class=”form-group mx-sm-3 mb-2”>
<input type=”number” v-model=”newElement.buy” class=”form-control”>
</div>
<button v-on:click=”buyStock” type=”button” class=”btn btn-success mb-2”>BUY</button>
</form>

<section class=”stock_tables”>
<table class=”table table-striped”>
<thead>
<tr>
<th scope=”col”>{codeBuy}</th>
<th><a v-html=”negative”></a> Buy</th>
</tr>
</thead>
<tbody>
<tr v-for=”u in stocks”>
<th></th>
<td>{u.buy}</td>
</tr>
</tbody>
</table>
</section>
</div>

[Vue.js] Set different css styles for different components in vue-js project

there is a vue- project with the following src directory tree

assets
| moderator
| css /* css styling for pages and components for moderators, e.g. everything is coloured blue*/
| user
| css /* css styling for pages and components for users, e.g. everything is coloured orage*/
components
| moderator /* here are the .vue.js components for moderators’ views */
| user /* here are the .vue.js components for users’ views*/

main.js
router.js
vue.config.js

The app will have two types of users :

Moderators
Users

Each type must have its own styling, components for users must use css-styles from assets/user/css, while moderators’ from assets/user/css.
If I use scoped import, styling doesn’t propagate on external components like those of Bootstrap.

So my questions:

How to set different styling for respective components so that moderator will have everything in blue, and user - in orange?
Is it possible to set style programmatically depending on routes, defined in router?

Solution :

When you use Style in VueJS the css will render through all components. To use style only in the current component you need to uae scoped. This far you have done right, BUT! Bootstrap and other libraries mostly use components to represent their features so scoped will not work… But there is still a way! You can use >>> before the css you want to work in child-components. >>>b-corousel {color=red;}

[Vue.js] Vue.js / Vuetify How to remove this huge whitespace in my dialog box?

My dialog box in our web app renders an empty white-space between the v-cards and the v-card-action buttons (Save and Cancel). What can I do to remove this whitespace / scrollbar?

I tried moving Cancel/Save to inside of where are, but it still leaves a whitespace now below the buttons.

<v-dialog v-model=”dialog” max-width=”500px”>
<template v-slot:activator=”{ on }”>
<v-btn color=”success” dark class=”mb-2” v-on=”on”>Add Student</v-btn>
</template>

<v-card>
<v-card-title>
<span class=”headline”>{ formTitle }</span>
</v-card-title>

<v-card-text>
<v-container grid-list-md>
<v-layout wrap>
<v-flex xs12 sm6 md4>
<v-text-field v-model=”editedItem.studnum” label=”Student Number”></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model=”editedItem.surname” label=”Surname Name”></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model=”editedItem.fname” label=”First Name”></v-text-field>
</v-flex>
<v-flex xs12 sm6 md4>
<v-text-field v-model=”editedItem.mname” label=”Middle Initial”></v-text-field>
</v-flex>
</v-layout>

</v-container>

</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color=”blue darken-1” flat @click=”close”>Cancel</v-btn>
<v-btn color=”blue darken-1” flat @click=”save”>Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>

I expect the output to have a smaller dialog box, but now it has whitespaces in the middle.

Images:

Actual output:
https://prnt.sc/nkpvek

https://prnt.sc/nkpvr0

Expected output:
https://prnt.sc/nkpwjk

Thank you !

Solution :

I’d advise against putting button inside the dialog as an activator. Messes up CSS sometimes. Place it outside and do @click=”dialog = true”.

[Vue.js] Error in running nuxt project 'nuxt' is not recognized as an internal or external command

When I try to run npm run dev in my nuxt project, my console returns this message:

‘nuxt’ is not recognized as an internal or external command,
operable program or batch file.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! andromeda@1.0.0 dev: `nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the andromeda@1.0.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

Solution :

Make sure nuxt is installed in the Nuxt project:

$ cd /path/to/nuxt-project
$ npm list nuxt
nuxt-project@1.0.0 /path/to/nuxt-project
nuxt@2.6.3

Here /path/to/nuxt-project contains the package.json and node-modules.

If it isn’t installed, add nuxt to the project by doing:

$ npm install –save nuxt

Or put it in the project’s package.json then do npm install:

“dependencies”: {
“nuxt”: “^2.0.0”
},

[Vue.js] How can I disable scrollbar by resizing elements?

Here is the image of my current page: image

As you can see there’s a scrollbar and to disable it but not by set overflow to hidden and something like that.

to disable it by resizing elements on the page.

Can anybody help me?

Solution :

The code below can make the scrollbar invisible but still work:

.class-of-your-container::-webkit-scrollbar {
width: 0px !important;
height: 0px !important;
}

2.If you mean disable the scroll behavior,then you should make sure the document content’s height won’t exeed the window’s height.It is hard because the users screen’s height is not the same.To acheive this,you can add height:100% to the container element.

[Vue.js] How to add API in my v-data-table Vuetify Vuex Axios API

there is a problem when trying to search my API data table using v-data-table
here’s my code, to assign my reports state but how to add this array, and how I can fix my search table

<div class=”ReportsTable”>
<div class=”my-3 mx-1”>
<v-card>
<v-card flat color=”secondary” dark>
<v-card-title>
<span>Reports</span>
<v-spacer></v-spacer>
<v-text-field
v-model=”search”
append-icon=”search”
label=”Search”
single-line
hide-details
\></v-text-field>
</v-card-title>
</v-card>
<v-data-table
v-for=”report in reportsData.data”
:key=”report.id”
:headers=”headers”
:items=”reports”
:search=”search”
\>
<template v-slot:items=”props”>
<td>{ report.user.email }</td>
<td>{ report.issues }</td>
<td>{ report.information }</td>
<td>{ report.created_at }</td>
</template>
<template v-slot:no-results>
<v-alert
:value=”true”
color=”error”
icon=”warning”
\>the search for “{ search }” found no results.</v-alert>
</template>
</v-data-table>
</v-card>
</div>
</div>
</template>

<script>
import { mapState } from “vuex”;
export default {
data() {
return {
search: “”,
headers: [
{ text: “Email”, value: “email” },
{ text: “Issues”, value: “issues” },
{ text: “Information”, value: “information” },
{ text: “created_at”, value: “created_at” }
],
reports: [
{ email: null, issues: null, information: null, created_at: null }
]
};
},
mounted() {
this.$store.dispatch(“loadReportsData”);
},
computed: mapState([“reportsData”])
};
</script>

<style lang=”scss”>
</style>

https://i.imgur.com/2c5pL8C.png here’s my error example and this my unfiltered example https://i.imgur.com/a8Z6PQh.png
my table can grab that API but i can’t search specific data on my search method please help me

Solution :

I think here watch would be good option.

watch: {
‘reportsData’: {
handler: (val) => {
if (val) {
this.reports = val
}
},
deep: true
}
}

By doing this every time whenever new data is available in reportdata it will update reports.

Solution 2:

could you try this solution please, i removed reports completly and replaced :items=’reportData.data’

<div class=”ReportsTable”>
<div class=”my-3 mx-1”>
<v-card>
<v-card flat color=”secondary” dark>
<v-card-title>
<span>Reports</span>
<v-spacer></v-spacer>
<v-text-field
v-model=”search”
append-icon=”search”
label=”Search”
single-line
hide-details
\></v-text-field>
</v-card-title>
</v-card>
<v-data-table
:headers=”headers”
:items=”reportsData.data”
:search=”search”
\>
<template v-slot:items=”props”>
<td>{ report.user.email }</td>
<td>{ report.issues }</td>
<td>{ report.information }</td>
<td>{ report.created_at }</td>
</template>
<template v-slot:no-results>
<v-alert
:value=”true”
color=”error”
icon=”warning”
\>the search for “{ search }” found no results.</v-alert>
</template>
</v-data-table>
</v-card>
</div>
</div>
</template>

<script>
import { mapState } from “vuex”;
export default {
data() {
return {
search: “”,
headers: [
{ text: “Email”, value: “email” },
{ text: “Issues”, value: “issues” },
{ text: “Information”, value: “information” },
{ text: “created_at”, value: “created_at” }
],
};
},
mounted() {
this.$store.dispatch(“loadReportsData”);
},
computed: mapState([“reportsData”])
};
</script>

<style lang=”scss”>
</style>

[Vue.js] How to avoid toFixed when the value is undefined or delayed response to that value

when seeing this error in my console:

isNaN(…).toFixed is not a function

Here is some of the HTML code when writing with Vue.js:

<v-flex xs3 class=”text-lg-right”
v-for=”(mrp, index) in [medicine.orderedMedView.combinations[combinationIndex]]“ :key=”index”>
<div class=”primary-header-font”>
₹ { isNaN((mrp && (mrp.totalPrice - (mrp.totalPrice * (medicine.discountPercentage / 100))))).toFixed(2) ?
0 :
(( mrp && mrp.totalPrice - (mrp.totalPrice * (medicine.discountPercentage / 100)))).toFixed(2) || 0 }  
</div>
<span v-if=”mrp && mrp.totalPrice != NaN” class=”secondary-header-font”>
{ medicine.discountPercentage }%
</span>
<span v-if=”mrp && mrp.totalPrice != NaN” class=”secondary-header-font strike-through”>
₹ { mrp && mrp.totalPrice && (mrp.totalPrice).toFixed(2) || 0 }  
</span>
</v-flex>

I guess in my medicine state when I use this, the response gets delayed… so maybe that’s why it is saying “not a function”. How can I fix this?

Solution :

isNaN is a function to check wether the value provided is number or not.
It’s return value is true or false.
Therefore, you can’t use the function toFixed on the return value of isNaN.

Try to rearrange the parentheses so the toFixed will be after a number.

Solution 2:

check the variable is isNaN before doing toFixed. like the following sample snippet

var a=10.898978
console.log(!isNaN(a)?a.toFixed(2):0)

Solution 3:

In vue.js you would prefere to use a method for this sort of statement.

I guess this is one reason why you missed the toFixed(2) in the first ternary expression.

So in the method you can imagine something like:

price(mrp) {
let price = mrp && (mrp.totalPrice - (mrp.totalPrice * (this.medicine.discountPercentage / 100));
return isNaN(price) ? 0 : price;
}

And in you template:

<v-flex xs3 class=”text-lg-right”
v-for=”(mrp, index) in [medicine.orderedMedView.combinations[combinationIndex]]“ :key=”index”>
<div class=”primary-header-font”>
₹ { price(mrp) }  
</div>
<span v-if=”mrp && mrp.totalPrice != NaN” class=”secondary-header-font”>
{ medicine.discountPercentage }%
</span>
<span v-if=”mrp && mrp.totalPrice != NaN” class=”secondary-header-font strike-through”>
₹ { mrp && mrp.totalPrice && (mrp.totalPrice).toFixed(2) || 0 }  
</span>
</v-flex>

If you want to avoid some check you can always use the v-if=”medicine” on the v-flex so no value is computed until medicine get populated.

[Vue.js] How can I define a color for a user in a chat

there is a chat with pusher, it’s working well, but now I would like to change the color of the own username when you are talking. At the moment, my username et the username of another user is in black, but I would like to have the username of the own account in another color to know when you are talking. (My english is kinda medium sorry ask if you need more explanation)
Thanx for helping

This is in my app.blade

<div class=”row”>
<div class=”col-md-12 col-md-offset-2”>
<div class=”col-md-12 col-md-offset-2”>
<div class=”panel-body panel-content” id=”mess_cont”>

<chat-messages id=”mess” :messages=”messages”></chat-messages>
</div>
<div class=”panel-footer”>
<chat-form
v-on:messagesent=”addMessage”
:user=”{ Auth::user() }”
\></chat-form>
</div>
</div>
</div>
</div>

This is my ChatMessages.vue.js :

<template>
<ul class=”chat messages” >
<li class=”left clearfix list-group-item” v-for=”message in messages” >

<div class=”chat-body clearfix”>
<div class=”header”>
<strong class=”primary-font” >
{ message.user.firstName }
{ message.user.lastName}
</strong>
</div>
<p>
{ message.message }
</p>
</div>
</li>
</ul>
</template>

<script>
export default {
props: [‘messages’]
};

</script>

Solution :

Assuming the User model has some sort of id, you could apply CSS classes or styles based on the id of the author of the message.
It could be something like this

<chat-messages id=”mess” :messages=”messages” :currentuserid=”{Auth::user()->id}”></chat-messages>

<template>
<ul class=”chat messages” >
<li class=”left clearfix list-group-item” v-for=”message in messages” >

<div class=”chat-body clearfix”>
<div class=”header”>
<strong class=”primary-font “
v-bind:class=”{
classForAuthorSameAsUser: (message.user.id === currentuserid),
classForAuthorDiffThanUser: (message.user.id !== currentuserid)
}”>
{ message.user.firstName }
{ message.user.lastName}
</strong>
</div>
<p>
{ message.message }
</p>
</div>
</li>
</ul>
</template>

<script>
export default {
props: [‘messages’,’currentuserid’]
};

</script>

<style scoped>
.classForAuthorSameAsUser {
color: red;
}
.classForAuthorDiffThanUser {
color: blue;
}
</style>

[Vue.js] Vue.js. TypeError Cannot read property 'post' of undefined even though vue-resource is definitely installed

Okay, so:

when getting a TypeError and I don’t know why,
Vue-resource is installed, and imported Vue.use(‘vue-resource’); import {} from ‘vue-resource’; in my main.js.

there is tried importing it different way, there is looked for a solution, with no luck.

The place when invoking that function is after I click a button
<button class=”btn btn-primary” @click=”submit()”>Submit</button>.

The “submit” function looks like this:

this.$http
.post(“https://vue-http-20bf2.firebaseio.com/data.json", this.user)
.then(
response => {
console.log(response);
},
error => {
console.log(error);
}
);
}```

Solution :

Ok, so I solved it.

The issue was I don’t know where. I had to basically import vue.js and VueResource again, and tell vue.js to use the package (again).

import vue.js from ‘vue’
import VueResource from ‘vue-resource’;
import App from ‘./App.vue’

`Vue.use(VueResource);`

Please note I already tried doing it that way.

In App.vue, there is

submit() {
this.$http
.post(“https://vue-http-20bf2.firebaseio.com/data.json", this.user)
.then(
response => {
console.log(response);
},
error => {
console.log(error);
}
);
}