link137 link138 link139 link140 link141 link142 link143 link144 link145 link146 link147 link148 link149 link150 link151 link152 link153 link154 link155 link156 link157 link158 link159 link160 link161 link162 link163 link164 link165 link166 link167 link168 link169 link170 link171 link172 link173 link174 link175 link176 link177 link178 link179 link180 link181 link182 link183 link184 link185 link186 link187 link188 link189 link190 link191 link192 link193 link194 link195 link196 link197 link198 link199 link200 link201 link202 link203 link204 link205 link206 link207 link208 link209 link210 link211 link212 link213 link214 link215 link216 link217 link218 link219 link220 link221 link222 link223 link224 link225 link226 link227 link228 link229 link230 link231 link232 link233 link234 link235 link236 link237 link238 link239 link240 link241 link242 link243 link244 link245 link246 link247 link248 link249 link250 link251 link252 link253 link254 link255 link256 link257 link258 link259 link260 link261 link262 link263 link264 link265 link266 link267 link268 link269 link270 link271 link272 link273

[Vue.js] Vue ctrl+s event listener not firingWhy is ctrl+s not fired?Is there a way to preventDefault without coding it?How do I get this working?

My application dialog should respond to “Ctrl+S” for a save function and cancel the default browser Save event.

<div
@keyup.83=”doSave”
@keyup.ctrl.83=”doSave”
@keyup.alt.83=”doSave”
tabindex=”0”>

The doSave event is fired on pressing ‘s’ (and alt+s) but not on ctrl+s.

Why is ctrl+s not fired?

BONUS QUESTION: Is there a way to preventDefault without coding it? Somehow it should be possible adding .once but the docs are vague.

https://codepen.io/cawoodm/pen/qvgxPL

Solution :

There are several questions packed into the question, so when going to answer them one by one:

Why is ctrl+s not fired?

Several reasons. You are using the keyup event, while the browser starts to save the page on a keydown event. the keyup event is thus never fired.

For any event to be registered on the div, the div must have focus, because otherwise the event will not originate from that element, but instead from (presumably) the body.

Is there a way to preventDefault without coding it?

Yes. Add the prevent modifier to the event. In the same way, you can use once to unregister an event after it has triggered once, stop to use stopPropagation() and passive to explicitly not stop propagation. You would use something like: @keydown.ctrl.83.prevent=”saveMe”.

How do I get this working?

If you are find with the user having to focus the element before being able to save, and otherwise getting the default behaviour, use the following:

<div
id=”app”
tabindex=”0”
@keydown.ctrl.83.prevent.stop=”saveInsideComponent”
\>
<!– –>
</div>

Otherwise, this is one of the few moments where registering the own event listener is useful. Just make sure to remove it before the component is destroyed, or you will have a rogue event listener throwing errors on other components + a memory leak to deal with.

mounted() {
document.addEventListener(“keydown”, this.doSave);
},

beforeDestroy() {
document.removeEventListener(“keydown”, this.doSave);
},

methods: {
doSave(e) {
if (!(e.keyCode === 83 && e.ctrlKey)) {
return;
}

e.preventDefault();
console.log(“saving from DOM!”);
},
}

[Vue.js] Vue.js toggling expanding v-for component from parent

I’ve got an ‘Album’ component that is being used on a page. when trying to create something whereby only one album can be toggled at a given time. So if an album is already open when clicking another it would close.

Component being mounted recursively in the ‘parent’ app.

<album v-for=”(album, index) in albums”
:key=”index”
@expand=”setAlbumContainerHeight”
@action=”removeFromCollection”
:albumDetails=”album”
page=”collection”>
</album>

The component itself.

<template>
<div v-on:click=”toggleExpand” ref=”album” class=”album”>
<img class=”album-artwork” alt=”album-artwork” :src=”albumDetails.cover_url”>
<div ref=”expandContent” class=”expanded-content”>
<div class=”left-block”>
<div class=”title”>{ albumDetails.title }</div>
<div class=”artist”>{ albumDetails.artist }</div>

<!– Search page specific –>
<div v-if=”page === ‘search’” class=”info”>{ albumDetails.year }<br> <span v-for=”genre in albumDetails.genre”> { genre }</span><br> { albumDetails.label }</div>
<!– Collection page specific –>
<div v-if=”page === ‘collection’” class=”info”>{ albumDetails.year }<br> <span v-for=”genre in albumDetails.genres”> { genre.genre }</span><br> { albumDetails.label }</div>

<!– Search page specific –>
<button v-if=”page === ‘search’” v-on:click.stop=”addToCollection” class=”add-collection”>Add to collection</button>
<!– Collection page specific –>
<button v-if=”page === ‘collection’” v-on:click.stop=”removeFromCollection” class=”add-collection”>Remove from collection</button>
</div>

<div v-if=”page === ‘search’” class=”right-block”>
<div class=”a-side”>
<p v-for=”track in albumDetails.track_list_one” class=”track”>{ track }</p>
</div>
<div class=”b-side”>
<p v-for=”track in albumDetails.track_list_two” class=”track”>{ track }</p>
</div>
</div>

<div v-if=”page === ‘collection’” class=”right-block”>
<div class=”a-side”>
<p v-for=”track in trackListOne” class=”track”>{ track.track }</p>
</div>
<div class=”b-side”>
<p v-for=”track in trackListTwo” class=”track”>{ track.track }</p>
</div>
</div>

<img class=”faded-album-artwork” alt=”faded-album-artwork” :src=”albumDetails.cover_url”>
</div>
</div>
</template>
<script>
module.exports = {
name: ‘Album’,
props: [‘albumDetails’, ‘page’],

data: function () {
return {
expanded: false,
expandedContentHeight: 0,
trackListOne: [],
trackListTwo: []
}
},

mounted() {
if (this.albumDetails.tracks) {
this.getTrackListOne(this.albumDetails.tracks);
this.getTrackListTwo(this.albumDetails.tracks);
}
},

methods: {
toggleExpand() {
if (!this.expanded) {
this.expanded = true;
this.$refs.expandContent.style.display = ‘flex’;
this.expandedContentHeight = this.$refs.expandContent.clientHeight;
let height = this.$refs.album.clientHeight + this.expandedContentHeight;
this.$emit(‘expand’, height, event);
} else {
this.expanded = false;
this.$refs.expandContent.style.display = ‘none’;
let height = ‘initial’;
this.$emit(‘expand’, height, event);
}
},

addToCollection() {
this.$emit(‘action’, this.albumDetails.cat_no);
},

removeFromCollection() {
this.$emit(‘action’, this.albumDetails.cat_no);
},

getTrackListOne(tracks) {
let halfWayThough = Math.floor(tracks.length / 2);
this.trackListOne = tracks.slice(0, halfWayThough);
},

getTrackListTwo(tracks) {
let halfWayThough = Math.floor(tracks.length / 2);
this.trackListTwo = tracks.slice(halfWayThough, tracks.length);
},
},
}
</script>
<style scoped lang=”scss”>
@import ‘./styles/album’;
</style>

The component itself is storing its state with a simple ‘expanded’ data attribute. Currently this means that the component works nicely when a user is opening and closing each album, however, problems occur when they are opening several at a time. Due to absolute positioning when manually having to set the height of the container. The aim is to have only one open at a time. when having trouble thinking of a way to store and track what album is currently open - I’m also unsure how the parent can manage the stage each album / open and closing them where. Even if I know which album is open in the parent how can I trigger individual child components methods?

I’ve tried to be as clear as possible, please let me know if there’s anything else I can make clearer.

Solution :

I’m not quite sure what you mean by recursive, as far as I can see you’re not referencing the album component within itself recursively.

I’d go with this approach:
expanded is a property of the component.
On a click the component emits a this.$emit(‘expand’, albumID).
In the parent you listen for the @expand event and assign the expandedAlbumID to the event payload.
The last remaining piece of the puzzle is now to pass the expanded property like :expanded=”expandedAlbumID == album.id”

Full working example: https://codesandbox.io/s/o5p4p45m9

[Vue.js] Sharing data between components in vue.js

I got an array of data in one component which to access in another component but cannot get it right

My idea was to just import component one in component two and thought I could access the data in that way but it didnt work.

here is what I got so far …

Component 1:

export default {
data() {
return {
info: [
{
id: 1,
title: “Title One”
},
{
id: 2,
title: “Title Two”
},

Component 2:

<template>
<div>
<div v-for=”item in info” v-bind:key=”item.id”>
<div>{ item.title } </div>
</div>
</div>
</template>

<script>
import ComponentOne from “../views/ComponentOne “;

export default {
components: {
ComponentOne
}, But after this when a bit lost

Can anyone point my to the right direction it would be very much appreciated!

Solution :

In order to access shared data, the most common way is to use Vuex. I’ll get you going with the super basics with a module system as it does take a little reading.

npm install vuex –save

Create new folder called store in the src directory.

src/store/index.js

import vue.js from ‘vue’
import Vuex from ‘vuex’
import example from ‘./modules/example’

Vue.use(Vuex)

export default new Vuex.Store({
modules: {
example // replace with whatever you want to call it
}
})

src/main.js

// add to the imports
import store from ‘./store/index’

// Change the vue.js instance init
new Vue({
router,
store, // <— this bit is the thing to add
render: h => h(App)
}).$mount(‘#app’)

/src/store/modules/example.js

// initial state
const state = {
info: []
}

// getters
const getters = {}

// actions
const actions = {
}

// mutations
const mutations = {
set (state, newState) {
state.info.splice(0)
state.info.push.apply(state.info, newState)
}
}

export default {
namespaced: true,
state,
getters,
actions,
mutations
}

To update the store when you get info, from any component you can use this.$store.commit(‘example/set’, infoArray) where the first parameter follows the pattern of module name/mutation function name, and the second parameter is the ‘new state’ that you want updated.

To access the data from the store, you can access it from the components as a computed property:

computed: {
info () {
return this.$store.state.example.info
}
}

Obviously you can use getters and actions and other stuff, but this will get you going and you can read up and modify the Vuex store once you get comfortable and understand how it works.

Solution 2:

Let’s say if you do not want to use any other state management like vuex then you can share with the use of mixins.

Well, you can achieve it with the use of Vue.mixins.

Mixins are a flexible way to distribute reusable functionalities for vue.js components. A mixin object can contain any component options. When a component uses a mixin, all options in the mixins will be mixed into the components own options.

Mixins official docs

Hope this helps!

[Vue.js] How to use Laravel authentication and vue-router together

I’m new to Laravel and PHP in general, but familiar with vue.js and SPA’s. I know how to create authentication with Bcrypt, for example. However, I used Laravel to run php artisan make:auth and to create several different endpoints for the backend.

I was trying to convert my app into a SPA using Vue, however using routing with vue.js causes issues with the routes defined in the web.php. For example, there is my web.php like this, with several different routes.

<?php

Route::get(‘/{vue_capture?}’, function () {
return view(‘app’);
})->where(‘vue_capture’, ‘^(?!storage).*$’);

Route::get(‘/‘, function () {
return view(‘app’);
});
Route::resource(‘Videos’, ‘VideoController’)->middleware(‘auth’,’isAdmin’);
Route::resource(‘Categories’, ‘CategoriesController’)->middleware(‘auth’);
Route::get(‘/search’, ‘VideoController@search’)->middleware(‘auth’);

Auth::routes();

Route::get(‘/settings/account’, ‘AccountsController@edit’)->middleware(‘auth’);
Route::get(‘/auth’, ‘AccountsController@get’);
Route::put(‘/settings/account’, ‘AccountsController@update’)->middleware(‘auth’);

However, I also have a routes.js to have vue-router handle the routing with the following :

import Home from ‘./components/Home.vue’
import Videos from ‘./components/Videos.vue’
import Categories from ‘./components/Categories.vue’

export default{
mode: ‘history’,

routes: [
{
path:’/‘,
component:Home
},

{
path:’/Videos’,
component:Videos
},
{
path:’/Categories’,
component:Categories
},
{
path:’/login’,
component:login
},
{
path:’/register’,
component:register
},
{
path:’/logout’,
component:logout
}
]
}

I understand that vue.js is supposed to take over the routing if you use a SPA, but is there any way to use both? I can’t find anything that addresses this issue but I can’t believe that Laravel would make you choose to either use their built-in commands like php artisan make:auth or have to scrap all of that and do it all manually if you want a SPA with routing.

I’ve tried going through different CRUD turorials on using Laravel and or Vue.
I’ve tried directing all of the routes to vue.js to have vue-router handle the routing.
I’ve tried not giving all routing to vue-router and retaining the back-end routes that I had in web.php

Other semi-related problem is my routes aren’t even appearning as links using router-link . It just appears as normal text. But for now my priority is the routing issue.

Solution :

You can combine both vue.js route and Laravel route. But for the best result, I advise you use vue.js router since you are building an spa.

remove

Route::get(‘/‘, function () {
return view(‘app’);
});

put all the backend route before the route that point to the vue.

Route::resource(‘Videos’, ‘VideoController’)->middleware(‘auth’,’isAdmin’);
Route::resource(‘Categories’, ‘CategoriesController’)->middleware(‘auth’);
Route::get(‘/search’, ‘VideoController@search’)->middleware(‘auth’);

Auth::routes();

Route::get(‘/settings/account’, ‘AccountsController@edit’)->middleware(‘auth’);
Route::get(‘/auth’, ‘AccountsController@get’);
Route::put(‘/settings/account’, ‘AccountsController@update’)->middleware(‘auth’);

Route::get(‘/{vue_capture?}’, function () {
return view(‘app’);
})->where(‘vue_capture’, ‘^(?!storage).*$’);

Also, verify that you don’t have conflicting routes on the backend (run php artisan route:list to see the laravel route list) and vue.js routes. I hope this helps.

[Vue.js] Where/How to define a submit destination for my self created form (Vue) component?

to re-use a form component through my website, but the submit button will have to handle different things every time (display different data, depending which page is calling the form-component)

I’m a little bit new to paying around with vue.js components and passing data between them, up until now I did messy one-page apps.

My current plan is have the form get the inputs/filters (from the form component), and when clicking submit, it should send this data (somehow?) to the element that called it - and will know how to handle it to the specific case from where it was called. I hope this is the right approach to this kind of scenario (?).

Is my plan a proper use of vue.js / a proper way to submit a form from an external form-component?
In what way do I trigger the submit to send data / run a method outside of my DashboardForm.vue.js component?
How do I send fetched data of DashboardForm.vue.js component from ReportType1.vue.js and re-use this functionality in ReportType2.vue.

This is my vue.js Form component (DashboardForm.vue):

<template>

<div class=”row”>

<div class=”col-12”>
<div class=”card”>
<div class=”card-body”>

<form id=”mainForm” class=”form-material row” method=”POST”>
<div class=”” id=”date-range”>
<datepicker v-model=”startDate” input-class=”form-control inputDate” placeholder=”Start Date” required></datepicker>
<div class=”input-group-append”>
<span class=”input-group-text b-0 text-white”> to </span>
</div>
<datepicker v-model=”endDate” input-class=”form-control inputDate” placeholder=”End Date” required></datepicker>
<input type=”button” class=”btn btn-info waves-effect waves-light” v-on:click=”groupFilterDisplay(true);” value=”Filter by Group”/>
<!– <input type=”button” id=”submit-btn” class=”btn btn-success waves-effect waves-light” v-on:click=”loadNew” value=”Submit”/> –>
<input type=”button” id=”submit-btn” class=”btn btn-success waves-effect waves-light” value=”Submit”/>
</div>
</form>

</div>
</div>
</div>

<transition name=”fade”>
<div id=”groupFilter” class=”popupGroupFilter” v-if=”groupFilter”>
<div id=”filterArea”>
<input type=”text” v-model=”searchGroupInput” placeholder=”Search” class=”gfSearch”>
<span class=”gfTitle”>Filter by Group</span>
<hr>
</div>
<div class=”ulTree”>
<ul>
<tree_item class=”item” v-bind:model=”groupTree”></tree_item>
</ul>
</div>
<div v-on:click=”applyGroupFilter();” class=”gfClose gfApply”><span> Apply</span></div>
<div v-on:click=”groupFilterDisplay(false);” class=”gfClose”><span>X Close</span></div>
</div>
</transition>

</div>
</template>

<script>
// import { GF } from ‘../mixins/GF.js’;

export default {
name: ‘DashboardForm’,
// mixins: [GF],
data() {
return {
groupTree: window.groups,
searchGroupInput: ‘’,
searchGroupArray: [],
groupFilterApplied: false,
groupFilterBackup: [],
selectedIds: [],

groupFilter: false,
startDate: null,
endDate: null,
mode: 0,
}
},
props: {
options: Array
},
watch: {
‘searchGroupInput’: function (newVal, oldVal) {
this.groupTree = this.searchGroupResult();
}
},
methods: {
recurseGroups: function (arr, action) {
},
applyGroupFilter: function () {

},
groupFilterDisplay: function (display) {

},
searchGroupResult: function () {
},
fetchGroupIds: function () {
}
}
};
</script>

This is the component that uses the DashboardForm for example (
ReportType1.vue):

<script>
import DashboardForm from “../tools/DashboardForm.vue”;

export default {
components: {
DashboardForm
},
data() {
return {
};
},
created() {
},
mounted() {
},
destroyed() {
},
watch: {
},
methods: {
}
}
</script>

<!– Template –>
<template>
<div>

<!– Form –>
<DashboardForm/>

<!– form result –>
<div id=”resultContainer”> <datatable/> </div>

</div>
</template>

Solution :

Okay if I understood you well, we are trying to build a reusable form component.
I will give you a quick overview of how vue.js components communicate.

The component takes its necessary inputs using the props.
The component inner HTML can be passed from its user by using slot.
The component fire events to tell its user that there is something happened inside me.

Example of the three cases:

the component my-form template:

<form>
<div class=”row”>
<slot></slot>
</div>
<div class=”row”>
<div class=”col-12”>
<button type=”button” class=”btn btn-default” @click=”onSubmit”></button>
<button v-if=”hasReset” class=”btn btn-danger” @click=”onReset”></button>
</div>
</div>
</form>

the component js file:

export default {
name: ‘my-form’,
data() {
return {
}
},
props: {
reset: boolean
},
computed: {
hasReset: function(){
return this.reset;
}
}
methods: {
onSubmit: function(){
let data = { “name”: “dummy data” };
this.$emit(“submit”, data);
},
onReset: function(){
let data = { “name”: “” };
this.$emit(“reset”, data);
}
}
}

After that, you can use my-form component as below:

<my-form :reset=”formHasReset” @submit=”onFormSubmit” @reset=”onFormReset”>
<input class=”col-12” type=”text” name=”name”>
<input class=”col-12” type=”text” name=”username”>
<input class=”col-12” type=”password” name=”password”>
<input class=”col-12” type=”email” name=”email”>
</my-form>

And the javascript is:

data(){
formHasReset: true
},
methods: {
onFormSubmit: function(data){
console.log(data.name); //Should give you ‘dummy data’
},
onFormReset: function(data){
console.log(data.name); //Should give you ‘’
}
}

I hope it is clear now for you :).

[Vue.js] Would you process an image puzzle webapp on the server side or on the client side?

when building a web app game which simply takes an image file as an input from the filesystem, divides the image into blocks, then puts the image blocks randomly so that the client-side user can relocate the blocks to restore the original image.

The platform I will be using is Elixir/Phoenix language/framework on the backend and VueJS on the front end. When I tried to manipulate image with Erlang, I had some difficulty to find libraries for pixel manipulation. But then I thought, if every user’s puzzle image will have to be created on the server, it will cost a lot of resources anyway.

Do you think it’s better to send the image from the server’s filesystem to a client-side and create the image blocks on the client-side with Javascript or you would do it with Erlang/Elixir on the server side?

What would be the preferred method on a scientific basis, pros and cons?

Solution :

This is how when doing it.

# Args Explantion :
# -resize 72x72! - Resizes the passed Image, `!` means don’t care about aspect ratio
# -crop 24x24 - Crops the image
# -scene 1 - Start naming the cropped images starting with index 1
# -%02d - produces output such as 00, 01, 02, 03
# image_size - Actual image size
# seg_size - Size of small segments/cropped images
list = [
“#{img_path}”,
“-resize”,
“#{image_size} x #{image_size}!”,
“-crop”,
“#{seg_size} x #{seg_size}”,
“-scene”,
“1”,
“#{new_tmp}/%02d.png”
]

System.cmd(“convert”, list)

Solution 2:

I would go with ImageMagick command line wrapper.

As by cropping documentation, somewhat like below would do:

convert my_image: -repage 60x40-5-3 \
-crop 30x20 +repage my_image_tiles_%d.png`

Although there is an Elixir wrapper for IM, called Mogrify, it implements a limited set of operations, so I usually go with System.cmd/3.

For each input file you might create tiles and next time the file is being accessed, you might start with a check. If the file was already cropped, just serve the tiles, otherwise crop it before serving tiles. This would be basically a clean server-side one-liner, prone to reverse engineering, unlike client-side solutions.

[Vue.js] On a Keydown.enter event in input element within a child component is also calling a method that is defined in Parent Component

there is a parent component where user can select skills from a range of options and a child component where user can add their own skill if its not available on the parent component.

The issue is in child component, when a user enters skill into an input element on which there is an @keydown.enter event defined to call a method, to take the input and push it to an array and that all works. The only problem is when keydown.enter event is fired it’s also calling a method that is defined in the parent component which changes the state of the options element.

// parent component
<div class=”card-body”>
<p class=”card-subtitle font-weight-bold mb-1”>Select Skills</p>

<button
v-for=”skill in skills”
:key=”skill.id”
:class=”[skill.state ? skillSelectedState : skillNotSelectedState]“
class=”btn btn-sm m-2” @click=”addSkill(skill)”
:value=”skill.category”>

{skill.skills}

</button>

<clientInput></clientInput> // child component
</div>

<script>
import clientInput from ‘./ClientSkillInput.vue’

export default {
data() {
return {

skills: [], // getting skills from an axios call
selectedSkills: [],

}
}
}
methods: {

addSkill(skill) { // this is the method getting called

if (!skill.state) {
this.selectedSkills.push(skill.skills);
skill.state = true;
} else {
let position = this.selectedSkills.indexOf(skill.skills);
this.selectedSkills.splice(position, 1);
// skill.state = false;
}
},

}

// child component

<template>
<div class=”form-group mt-2”>
<label class=”d-block”>Not what you’re looking for?</label>
<div class=”customWraper”>
<div class=”userSkillbox d-inline bg-secondary”> // will be using v-for to loop on userProvidedSkills and show the user inputs
Rrby on rails
<button class=”userSkillboxBtn btn-sm border-0 text-white”> // to remove the input item
<i class=”fas fa-times”></i>
</button>
</div>

<input v-model=”userInput” type=”text” class=”d-inline border-0” placeholder=”Type to add different skill” @Click=””>
</div>
</div>
</template>

<script>
export default {
data() {
return {
isEditable: true,
userInput: ‘’,
userProvidedSkills: [],
}
},

methods: {
addUserInput() {
this.userProvidedSkills.push(this.userSkill);
this.userSkill = ‘’;
}
}

}
</script>

Solution :

It is not clear where youre adding the keydown event, but there 2 possible solutions:

1.Use a event modifier on the input to stop propagation

<input @keydown.enter.stop

2.Use the self event modifier on the parent component button

<button
v-for=”skill in skills”
@click.self=”addSkill(skill)”
:value=”skill.category”>

{skill.skills}

More about event modifiers here

[Vue.js] Vue removing first element from array and iterating over it

there is an array of objects called orders, for each order I iterate to pick the first element and also remove the first and iterate over the rest, for this purpose I created two method which take the orders array as parameter, however I’m getting weird results, I’m getting the first element two times as you can see in the image:

This is my full component (notice my two methods onlyFirst and receiptExceptFirst):

<template>
<div style=”width:100%; height:auto; display:flex; flex-direction:column; margin:40px 0px;”>
<div v-for=”order in user.orders” :key=”order.id” style=”width:100%; height:auto; border:30px solid rgb(10,10,10); display:flex; flex-direction:column; margin:20px 0px; background-color:rgb(235,235,235); padding:20px;”>
<div style=”width:100%; height:auto; display:flex; flex-direction:column;”>
<div style=”outline:1px solid red; width:100%; height:150px; display:flex; padding:20px; align-items:center; justify-content:space-between;”>
<div style=”width:50%; height:100%; display:flex; align-items:center;”>
<div style=”width:200px; height:100%; background-image:url(‘/img/misc/default.jpg’); background-size:cover; background-position:center; margin:0px 20px 0px 0px;”></div>
<span style=”font-size:17px; color:black; margin:0px 0px;”>{ onlyFirst(order.receipt).title }</span>
</div>
<span style=”font-size:17px; color:black;”>Cdigo: { onlyFirst(order.receipt).unicode }</span>
<span style=”font-size:17px; color:black;”>Precio: { onlyFirst(order.receipt).price } </span>
</div>
<div v-for=”(items, index) of receiptExceptFirst(order.receipt)” :key=”index” style=”width:100%; height:150px; display:flex; padding:20px; align-items:center; justify-content:space-between;”>
<div style=”width:50%; height:100%; display:flex; align-items:center;”>
<div style=”width:200px; height:100%; background-image:url(‘/img/misc/default.jpg’); background-size:cover; background-position:center; margin:0px 20px 0px 0px;”></div>
<span style=”font-size:17px; color:black; margin:0px 0px;”>{ items.title }</span>
</div>
<span style=”font-size:17px; color:black;”>Cdigo: { items.unicode }</span>
<span style=”font-size:17px; color:black;”>Precio: { items.price } </span>
</div>
<button style=”width:auto; height:auto; margin:0px 0px 0px auto; display:flex; align-items:center;” type=”button”>
<span style=”font-size:17px; color:var(–web_primary_color); margin-left:auto;”>mostrar todo</span>
<i class=”fas fa-sort-down” style=”font-size:20px; color:var(–web_primary_color); margin:0px 5px;”></i>
</button>
<div style=”width:100%; height:1px ; border-bottom:2px solid rgb(56,56,56); margin:10px 0px;”></div>
<div style=”width:100%; height:auto; display:flex; align-items:center;”>
<span style=”font-size:15px; color:rgba(0,0,0,0.9);”>Canjeado el 23/4/2018 a las 14:00</span>
<span style=”font-size:20px; color:rgba(0,0,0,0.9); margin-left:auto;”>Total:</span>
<span style=”font-size:20px; color:rgba(0,0,0,0.9);”>{ order.cartTotalPrice } </span>
</div>
</div>
</div>
</div>
</template>
<!–SCRIPTS–>
<script>
import { mapState, mapActions } from ‘vuex’;
export default{
name: ‘ORDERList1’,

props: {
user: {required:true }
},

mounted () {
console.log(this.$options.name+’ component successfully mounted’);
},

methods:{

onlyFirst: function(receipt){
let onlyFirst = receipt[0];
return onlyFirst;
},

receiptExceptFirst: function(receipt){
let receiptExceptFirst = receipt.splice(0, 1);
console.log(receiptExceptFirst);
return receiptExceptFirst;
}

}

}
</script>

What am I doing wrong??

Solution :

using array.splice will return an array with the removed item, not the array without the item you wanted to remove. Splice makes the change to the array directly which means that after splice, just use the receipt array

Solution 2:

You could try as suggested here:

receiptExceptFirst: function(receipt){
return receipt.slice(1);
}

However, if you only need to apply a different set of styles to the first element, you may want iterate over the whole array and then use CSS’ :first-child, which would leave you with a simpler component.

[Vue.js] Vue checkbox value not updating with Bootstrap 4 data-toggle=buttons

There is a conflict between vue.js and Bootstrap when data-toggle=”buttons” is mentioned in the code.

With that the highlighting of buttons work but the v-model array that the checkbox value is bound to is not updated.

If I remove that code, the highlighting of the selected button does not work. However, v-model starts working.

How to solve this issue?

HTML:

<div class=”form-group”>
<label class=”searchLabel”>Tool:</label>
<div class=”btn-group-toggle” data-toggle=”buttons”>
<label class=”btn btn-outline-primary m-1” v-for=”tool in output.tool” >
<input type=”checkbox” :value=”tool.tool_id” v-model=”availability”>
{tool.tool_name}
</label>
</div>
</div>

Vue.JS:

new Vue({
el: ‘#dev’,
data: {
output: {tool: []},
availability: []
})

Solution :

Codepen : https://codepen.io/anon/pen/MxLyZG

Dont know whats the issue of data-toggle=”buttons” with vuejs. When you click the checkbox that actually toggle ‘active’ class to the checkbox. you can toggle active class using vue. update the code with

<div class=”btn-group-toggle”>
<label class=”btn btn-outline-primary m-1” v-for=”tool in output.tool”
:class=”{‘active’ : availability.indexOf(tool.tool_id) !== -1}”>
<input type=”checkbox” :value=”tool.tool_id” v-model=”availability” >
{tool.tool_name}
</label>
</div>

Here I check if tool_id is in availability then binding active class