link3151 link3152 link3153 link3154 link3155 link3156 link3157 link3158 link3159 link3160 link3161 link3162 link3163 link3164 link3165 link3166 link3167 link3168 link3169 link3170 link3171 link3172 link3173 link3174 link3175 link3176 link3177 link3178 link3179 link3180 link3181 link3182 link3183 link3184 link3185 link3186 link3187 link3188 link3189 link3190 link3191 link3192 link3193 link3194 link3195 link3196 link3197 link3198 link3199 link3200 link3201 link3202 link3203 link3204 link3205 link3206 link3207 link3208 link3209 link3210 link3211 link3212 link3213 link3214 link3215 link3216 link3217 link3218 link3219 link3220 link3221 link3222 link3223 link3224 link3225 link3226 link3227 link3228 link3229 link3230 link3231 link3232 link3233 link3234 link3235 link3236 link3237 link3238 link3239 link3240 link3241 link3242 link3243 link3244 link3245 link3246 link3247 link3248 link3249 link3250 link3251 link3252 link3253 link3254 link3255 link3256 link3257 link3258 link3259 link3260 link3261 link3262 link3263 link3264 link3265 link3266 link3267 link3268 link3269 link3270 link3271 link3272 link3273 link3274 link3275 link3276 link3277 link3278 link3279 link3280 link3281 link3282 link3283 link3284

[Vue.js] Vuejs update a list in reactive manner Subscribe to RSS

I’ve two components
1. viewAndUpdateDish.vue
2. updateDish.vue

In viewAndUpdateDish,

user pick a restaurant from the drop down
dishes of that particular restaurant will filter out and loaded to the table.

then the user hit the update button on a dish and go to updateDish.vue.js component and update the dish.
then after he update the dish user is redirected to the viewAndUpdateDish

When the user redirected to the viewAndUpdateDish that previously selected restaurant should be selected and dishes should loaded. This is my use case.

What I did so far is,

create a variable called pickedRestaurantId in vuex store and when user select a restaurant I updated that Id.
And in the updateDish component at the end of the update function, I emit a event like this, this.$root.$emit(“clickedUpdate”);
And then in the viewAndUpdateDish compoent I did

mounted() {
this.$root.$on(“clickedSomething”, () => {
this.loadDishes(this.pickedResViewAndUpdateDish);
});
},

But this doesn’t seems work!
How do I achieve this using vuejs?
Hope my question is clear to you.

Solution :

On the “viewAndUpdateDish” component after the update logic you can do the following:
this.$emit(‘clickedUpdate’,yourResturantId);

then on the parent component make sure you are listening to the “clickedUpdate” event:

<update-dish @clickedUpdate=”loadDishes($event)”></update-dish> .

[Vue.js] How can I do the previous and next on pagination in Vue.js? Subscribe to RSS

I’m having trouble with the previous and next on pagination. Can somebody help how can I do the previous and next on pagination? my pagination looks like this Previous 1 2 3 Next. Here’s my jsfiddle https://jsfiddle.net/cspzm21o/2/

pagination : function(activePage) {
this.currentPage = activePage;
this.startIndex = (this.currentPage * 10) - 10;
this.endIndex = this.startIndex + 10;
},

previous : function() {
this.startIndex–;
},
next : function() {
this.startIndex++;
}

Solution :

You’re just incrementing/decrementing the startIndex in previous and next method. Instead you could do something like this:

previous : function() {
this.pagination(this.currentPage - 1);
},
next : function() {
this.pagination(this.currentPage + 1);
}

[Vue.js] Mutation does not update the store in VUEX Subscribe to RSS

Working with VUEX when trying to update the store but I do not achieve it, I do not understand the reason since I only want to enter a numerical data without any complications.In the mutation enter messages by console and I receive them successfully but nothing happens in the state of cart.

This is my code:

Mutations.js

export function shipping(state, cost) {
state.cart.shipping = cost;
console.log(cost);
console.log(‘hello from mutation’);
}

Template:

<input type=”number” name=”cost” :value=”shippingCost” @input=”updateCost”>

Methods

…mapMutations(‘cart’, [‘addProductToCart’, ‘subtractProductToCart’, ‘removeProductFromCart’, ‘removeAllProducts’, ‘shipping’ ]),

updateCost(event) {
this.$store.commit(‘cart/shipping’, event.target.value)
},

Computed

computed: {
…mapState( ‘cart’, [‘cart’] ),
…mapGetters(‘cart’, [‘totalItems’, ‘totalCost’]),
…mapGetters(‘cart’, [‘shippingCost’]),

shippingCost() {
return this.$store.getters.shippingCost;
}
}

Solution :

Solved, we must use VUEX as an object to be able to access more elements:

Very Important

const namespaced = true; //important!!

export default {
namespaced,
state,
mutations
}

State:

export default {
cart: {
products: [],
shipping : ‘’
}
}

And enter the data in this way:

computed: {
…mapState( ‘cart’, [‘cart’, ‘products’, ‘shipping’] ),

Regards

[Vue.js] How to Fetch data using Vue Js laravel Subscribe to RSS

How do I fetch data using vue.js js and laravel . there is created vue.js component and controller.

Here is my database table structure

<script>
export default {

data(){
return {
kudos : []
}
},
created(){
axios.get(‘./api/kudos’)
.then(response => this.kudos = response.data);
}
}
</script>

What I need to do is fetch the database data to blade file using vuejs .
Could someone guide me step by step?

Controller
vue.js Component
Blade File

Solution :

I think you’re looking for something like this?

Controller:

public function searchDatabase( Request $request )
{
$foo = DB::table(‘bar’)
->where([
[“description”, ‘LIKE’, “%{$request->input(‘query’)}%”]
])
->limit(5)
->get();

return response()->json($foo);
}

YourComponent.vue

<template>
<div id=”wrapper”>

<div class=”input-group”>
<input type=”text” placeholder=”Search database..” v-model=”query” v-on:keyup=”autoComplete” class=”form-control”>
</div>

<div class=”panel-footer” v-if=”results.length”>
<table class=”table table-sm”>
<tr v-bind:key=”result” v-for=”result in results”>
<td> { result.description } </td>
</tr>
</table>
</div>

</div>
</template>

<script>
export default{
data(){
return {
query: ‘’,
url: ‘/search/blade/route’,
results: []
}
},
methods: {
autoComplete(){
this.results = [];
if(this.query.length > 2){
axios.get(‘/api/kudos’, {params: {query: this.query}).then(response => {
this.results = response.data;
});
}
}
}
}
</script>

search.blade.php

<your-component></your-component>

[Vue.js] Vue error handling in destroyed event hook does not work Subscribe to RSS

Seems like error handling in vue.js does not work for me sometimes. If I write:

created() {
throw new Error();
}

I correctly see the error in the browser console. But if I write:

destroyed() {
throw new Error();
}

There is no error. If I change destroyed hook to:

destroyed() {
try {
throw new Error();
}
catch(err) {
console.error(err);
}
}

I can see the error - so the code is executed, by the error is ignored. I’m not sure is this a bug, a feature - or I’m just doing something silly.

I think I’ve seen other cases with other hooks - but I do not remember which.

I’m using Vue: 2.6.6 and Vue-Class-Component: 6.3.2

Solution :

Hope this will help you

From the VueJS Docs, here somewhere

destroy life cycle is called after a vue.js instance has been destroyed. When this hook is called, all directives of the vue.js instance have been unbound, all event listeners have been removed, and all child vue.js instances have also been destroyed.

[Vue.js] Use a Vue component for multiple templates Subscribe to RSS

I’m fairly new to vue.js and I’m not even sure if I’ve phrased my question correctly. Here is what when trying to achieve. when using a card cascade from bootstrap, each card show part of a blog post. Each card has a link to a webpage for the whole blog.

To try and achieve this there is two vue.js files. cardCascade.vue.js and singleBlog.vue. My problem is at the moment there is to create a different singleBlog.vue.js files for each blog I have.

For example, suppose there is two blog posts in my database. cardCascade.vue.js will also have two links to individual blog posts. Blog post 1 will then use singleBlog1.vue.js and blog post 2 will then use singleBlog2.vue

What can I do so that I can achieve this more efficiently such that I only need one singleBlog.vue.js and it dynamically adjusts the content based on the link I select from cardCascade.vue?

What there is right now for parts of the cardCascade.vue

<b-card v-for=”blog in blogs_duplicate” title=”Title” img-src=”https://placekitten.com/500/350" img-alt=”Image” img-top>
<b-card-text>
<!–{getBlogOfType(“Vue”,blog.id)}–>
{getBlogOfType(“Vue”,blog.id)}
</b-card-text>
<b-card-text class=”small text-muted”>Last updated 3 mins ago</b-card-text>
</b-card>

Below is what there is right now for singleBlog.vue, keep in mind right now it just displays all the blog posts in a list.

<template>
<div id=”single-blog”>
<ul>
<article>
<li v-for=”blog in blogs” v-bind:key=”blog.id”>
<h1>{blog.title}</h1>
<i class=”fa fa-cogs” aria-hidden=”true”></i>
<router-link v-bind:to=”{name:’datascience-single’, params: {blog_id: blog.blog_id}”>
<p>{blog.content}</p>
</router-link>
</li>
</article>
</ul>
</div>
</template>

<script>
import db from ‘./firebaseInit’
export default{
data(){
return{
id:this.$route.params.id,
blogs:[],
}
},
created(){
//this.$http.get(‘http://jsonplaceholder.typicode.com/posts/' + this.id).then(function(data){
//this.blog = data.body;
db.collection(‘Blogs’).orderBy(‘Type’).get().then(querySnapshot =>{
querySnapshot.forEach(doc => {
//console.log(doc.data());
const data={
‘id’: doc.id,
‘content’: doc.data().Content,
‘type’: doc.data().Type,
‘title’: doc.data().Title,
‘blog_id’:doc.data().blog_id,
}
this.blogs.push(data)
})
})
}
}
</script>

Solution :

It seems as though you should be giving the common component as a props information as to what it is rendering. Meaning you would make the call to the api in the parent and then make the child a “dumb” component. In the case you should make the calls to the api in cardCascade and then pass into the singleBlog component an id as props. Although in the case I do not see you using this component in the parent at all, where is it?

Solution 2:

Like Michael said, the right way to do that is making a props and receives that prop from the router. Then, when you make the requisition, you’ll pass this prop id. You can read more about props in here: https://vuejs.org/v2/guide/components-props.html

[Vue.js] Vue - Deep watching an array of objects and calculating the change? Subscribe to RSS

there is an array called people that contains objects as follows:

Before

[
{id: 0, name: ‘Bob’, age: 27},
{id: 1, name: ‘Frank’, age: 32},
{id: 2, name: ‘Joe’, age: 38}
]

It can change:

After

[
{id: 0, name: ‘Bob’, age: 27},
{id: 1, name: ‘Frank’, age: 33},
{id: 2, name: ‘Joe’, age: 38}
]

Notice Frank just turned 33.

there is an app where when trying to watch the people array and when any of the values changes then log the change:

<style>
input {
display: block;
}
</style>

<div id=”app”>
<input type=”text” v-for=”(person, index) in people” v-model=”people[index].age” />
</div>

<script>
new Vue({
el: ‘#app’,
data: {
people: [
{id: 0, name: ‘Bob’, age: 27},
{id: 1, name: ‘Frank’, age: 32},
{id: 2, name: ‘Joe’, age: 38}
]
},
watch: {
people: {
handler: function (val, oldVal) {
// Return the object that changed
var changed = val.filter( function( p, idx ) {
return Object.keys(p).some( function( prop ) {
return p[prop] !== oldVal[idx][prop];
})
})
// Log it
console.log(changed)
},
deep: true
}
}
})
</script>

I based this on the question that I asked yesterday about array comparisons and selected the quickest working answer.

So, at this point I expect to see a result of: { id: 1, name: ‘Frank’, age: 33 }

But all I get back in the console is (bearing in mind i had it in a component):

[vue.js warn]: Error in watcher “people”
(found in anonymous component - use the “name” option for better debugging messages.)

And in the codepen that I made, the result is an empty array and not the changed object that changed which would be what I expected.

If anyone could suggest why this is happening or where there is gone wrong here then it would be greatly appreciated, many thanks!

Solution :

the comparison function between old value and new value is having some issue. It is better not to complicate things so much, as it will increase the debugging effort later. You should keep it simple.

The best way is to create a person-component and watch every person separately inside its own component, as shown below:

<person-component :person=”person” v-for=”person in people”></person-component>

Please find below a working example for watching inside person component. If you want to handle it on parent side, you may use $emit to send an event upwards, containing the id of modified person.

Vue.component(‘person-component’, {
props: [“person”],
template: `
<div class=”person”>
{person.name}
<input type=’text’ v-model=’person.age’/>
</div>`,
watch: {
person: {
handler: function(newValue) {
console.log(“Person with ID:” + newValue.id + “ modified”)
console.log(“New age: “ + newValue.age)
},
deep: true
}
}
});

new Vue({
el: ‘#app’,
data: {
people: [
{id: 0, name: ‘Bob’, age: 27},
{id: 1, name: ‘Frank’, age: 32},
{id: 2, name: ‘Joe’, age: 38}
]
}
});
<script src=”https://unpkg.com/vue@2.1.5/dist/vue.js"></script>
<body>
<div id=”app”>
<p>List of people:</p>
<person-component :person=”person” v-for=”person in people”></person-component>
</div>
</body>

Solution 2:

there is changed the implementation of it to get the problem solved, I made an object to track the old changes and compare it with that. You can use it to solve the issue.

Here I created a method, in which the old value will be stored in a separate variable and, which then will be used in a watch.

new Vue({
methods: {
setValue: function() {
this.$data.oldPeople = _.cloneDeep(this.$data.people);
},
},
mounted() {
this.setValue();
},
el: ‘#app’,
data: {
people: [
{id: 0, name: ‘Bob’, age: 27},
{id: 1, name: ‘Frank’, age: 32},
{id: 2, name: ‘Joe’, age: 38}
],
oldPeople: []
},
watch: {
people: {
handler: function (after, before) {
// Return the object that changed
var vm = this;
let changed = after.filter( function( p, idx ) {
return Object.keys(p).some( function( prop ) {
return p[prop] !== vm.$data.oldPeople[idx][prop];
})
})
// Log it
vm.setValue();
console.log(changed)
},
deep: true,
}
}
})

See the updated codepen

Solution 3:

It is well defined behaviour. You cannot get the old value for a mutated object. That’s because both the newVal and oldVal refer to the same object. vue.js will not keep an old copy of an object that you mutated.

Had you replaced the object with another one, vue.js would have provided you with correct references.

Read the Note section in the docs. (vm.$watch)

More on this here and here.

[Vue.js] VUEX does not find a mutation but it is defined Subscribe to RSS

I’m working with VUEX and everything was fine until I registered a new mutation “shipping” since every time I commit it tells me: unknown mutation type: shipping. But I do not understand the reason since the previous mutations work correctly.

This is my code:

mutations:

export function removeAllProducts (state){
state.cart = []
}

export function shipping(state, cost){
state.cart.shipping = cost;
};

Component:

Template:

<input type=”number” name=”cost” :value=”shippingCost” @input=”updateCost”>

Scripts:

computed: {
…mapState( ‘cart’, [‘cart’] ),
…mapGetters(‘cart’, [‘totalItems’, ‘totalCost’, ‘shippingCost’]),
shippingCost:{
get(){ return this.$store.getters.shippingCost; },
}
},

methods: {
…mapMutations(‘cart’, [‘addProductToCart’, ‘subtractProductToCart’, ‘removeProductFromCart’, ‘removeAllProducts’, ‘shipping’ ]),
…mapMutations(‘routes’, [‘addRoute’]),

updateCost (e) {
this.$store.commit(‘shipping’, e.target.value)
}
}
}

Solution :

You might call the mutation wrong. If this line is correct:

…mapMutations(‘cart’, [‘addProductToCart’, ‘subtractProductToCart’, ‘removeProductFromCart’, ‘removeAllProducts’, ‘shipping’ ])

Then the function updateCost should be:

updateCost (e) {
this.$store.commit(‘cart/shipping’, e.target.value)
}

if in the module you did set namespacing to true. Or the function can be

updateCost (e) {
this.shipping(e.target.value)
}

since you already use mapMutations to map shipping to the component.

[Vue.js] Multiselect in fabric js without key modifier Subscribe to RSS

I was wondering if there is a way to actively set multi-selection “mode” in fabric js canvas without holding down the shift?

I wish to activate multiselection by listening on a boolean value thats tied to a checkbox.

there is been reading through the fabricjs docs and haven’t found anything regarding multi-select without the shift modifier key.

I’m uncertain if my request is valid but any pointers would be appreciated.

So basically I listen on the mouse:down event and checks if my boolean value is true/false, and if it’s true i would like to go into multi-selection mode.

canvas.on(‘mouse:down’, evt => {
if(this.multiSelect) {
// activate multi-select
}
}

Solution :

You can listen to the selection:created event and then push each new selection into an array that you will then use to create an ActiveSelection with multiple objects. When you set this.multiSelect to false you will need to also empty the multiSelection array. Something like this:

var multiSelection = [];
canvas.on(‘selection:created’, selected => {
if(this.multiSelect) {
multiSelection.push(selected);
var groupSelection = new fabric.ActiveSelection(multiSelection)
canvas.setActiveObject(groupSelection);
}
});

[Vue.js] Vue/Nuxt/Vuex - unknown getter Subscribe to RSS

The error appears when I use a v-for loop to go through the ‘allPosts’ data on my div.

The Nuxt documentation says ‘Modules: every .js file inside the store directory is transformed as a namespaced module’. Maybe I’m missing something in this regard?

pages/index.vue

<template>
<section id=”postgrid”>
<div v-for=”post in allPosts” :key=”post.id”></div>
</section>
</template>

<script>
import {mapGetters} from ‘vuex’

import PostTile from ‘@/components/Blog/PostTile’

export default {
components: {
PostTile
},
computed: mapGetters([‘allPosts’])
}
</script>

store/index.js

import vue.js from ‘vue’
import Vuex from ‘vuex’

import Posts from ‘./posts’

const store = new Vuex.Store({
modules: {
Posts
}
})

store/posts.js

const state = () => ({
posts: [
{
id: 0,
title: ‘A new beginning’,
previewText: ‘This will be awesome don\‘t miss it’,
category: ‘Food’,
featured_image: ‘http://getwallpapers.com/wallpaper/full/6/9/8/668959.jpg',
slug: ‘a-new-beginning’,
post_body: ‘<p>Post body here</p>’,
next_post_slug: ‘a-second-beginning’
},
{
id: 1,
title: ‘A second beginning’,
previewText: ‘This will be awesome don\‘t miss it’,
category: ‘Venues’,
featured_image: ‘https://images.wallpaperscraft.com/image/beautiful\_scenery\_mountains\_lake\_nature\_93318\_1920x1080.jpg',
slug: ‘a-second-beginning’,
post_body: ‘<p>Post body here</p>’,
prev_post_slug: ‘a-new-beginning’,
next_post_slug: ‘a-third-beginning’
},
{
id: 2,
title: ‘A third beginning’,
previewText: ‘This will be awesome don\‘t miss it’,
category: ‘Experiences’,
featured_image: ‘http://eskipaper.com/images/beautiful-reflective-wallpaper-1.jpg',
slug: ‘a-third-beginning’,
post_body: ‘<p>Post body here</p>’,
prev_post_slug: ‘a-second-beginning’,
next_post_slug: ‘a-forth-beginning’
}
]
})

const getters = {
allPosts: (state) => state.posts
}

export default {
state,
getters
}

Solution :

You have a number of issues in how you are setting up and accessing the store. Firstly you are creating the store using the “classic mode” which the docs tell us:

This feature is deprecated and will be removed in Nuxt 3.

So in order to be using the latest methods the store/index.js should look like this:

//store/index.js

//end

This is not a mistake, you don’t actually need anything in it, just have it exist. There is no need to import vue.js or vuex or any modules.

the store/posts.js can largely stay as it is, just change the state, mutations, getters, and actions to be exported constants and delete the bottom export:

//store/posts.js
export const state = () => ({
posts: [

]
})
export const mutations: {

}
export const actions: {

}
export const getters: {
allPosts: state => state.posts
}

//delete the following
export default {
state,
getters
}

Secondly you seem to be using mapGetters incorrectly. If you set up the store like there is above, you can use it in pages/index.vue.js like so:

//pages.index.vue

<script>
import {mapGetters} from ‘vuex’

export default {
computed: {
…mapGetters ({
allposts: ‘posts/allPosts’
})
}
}
</script>

Then you can access “allPosts” in the template as you would any computed property or access it with “this.allPosts” in the script.