link2877 link2878 link2879 link2880 link2881 link2882 link2883 link2884 link2885 link2886 link2887 link2888 link2889 link2890 link2891 link2892 link2893 link2894 link2895 link2896 link2897 link2898 link2899 link2900 link2901 link2902 link2903 link2904 link2905 link2906 link2907 link2908 link2909 link2910 link2911 link2912 link2913 link2914 link2915 link2916 link2917 link2918 link2919 link2920 link2921 link2922 link2923 link2924 link2925 link2926 link2927 link2928 link2929 link2930 link2931 link2932 link2933 link2934 link2935 link2936 link2937 link2938 link2939 link2940 link2941 link2942 link2943 link2944 link2945 link2946 link2947 link2948 link2949 link2950 link2951 link2952 link2953 link2954 link2955 link2956 link2957 link2958 link2959 link2960 link2961 link2962 link2963 link2964 link2965 link2966 link2967 link2968 link2969 link2970 link2971 link2972 link2973 link2974 link2975 link2976 link2977 link2978 link2979 link2980 link2981 link2982 link2983 link2984 link2985 link2986 link2987 link2988 link2989 link2990 link2991 link2992 link2993 link2994 link2995 link2996 link2997 link2998 link2999 link3000 link3001 link3002 link3003 link3004 link3005 link3006 link3007 link3008 link3009 link3010 link3011 link3012 link3013

[Vue.js] The return type of an async function must be the global Promise<T> type

Why does TSlint still says “The return type of an async function or method must be the global Promise type”?

I can’t understand what’s wrong.

UPDATED:

Solution :

Try returning a Promise-wrapped value corresponding to the expected generic type of the Promise, something like so:

@Action
public async register(registerInfo: Account): Promise<boolean> {
const res = await http.post(‘users/‘, registerInfo);

return new Promise<boolean>((resolve, reject) => {
resolve(res.data.success);

// Or reject() if something wrong happened
});

// Or simply return a resolved Promise
return Promise.resolve(res.data.success);
}

Actually, you should also be able to then() the result:

@Action
public async register(registerInfo: Account): Promise<boolean> {
return await http
.post(‘users/‘, registerInfo)
.then(res => res.data.success);
}

Solution 2:

I think the problem is that you are trying to return the result of await instead of capturing the result and processing it:

@Action
public async register(registerInfo: Account): Promise<boolean> {
const result = await http.post(‘users/‘, registerInfo);

return result.data.success;
}

[Vue.js] How do I start a new Ionic 4 app without using Angular? With Vue.js or Vanilla JS

when getting started with Ionic 4, and wondering how to start a new app without using Angular? The guide mentions ionic start for this, as in ionic start [name] [template] but this creates a scaffolding set up for Angular. I saw a video explaining how to use non-Angular but cant find it again now. Im looking to use vue.js or no framework.

Solution :

As I understand the README, if you are looking for an Ionic vue.js application, at this time, you should first create a project with vue.js and then add Ionic.

Copy/paste of the Ionic’s vue.js README:

To get started simply install @ionic/vue.js and @ionic/core with npm into the project and then register @ionic/vue.js as a plugin to the vue.js application.

So first:

npm install @ionic/vue.js @ionic/core –save

and then as described in the README:

import vue.js from ‘vue’;
import Ionic from ‘@ionic/vue’;
Vue.use(Ionic);

new Vue({
router,
store,
render: h => h(App)
}).$mount(‘#app’);

I didn’t tried but it’s what I would try ;)

[Vue.js] VueJS left menu list that updates main content panel

there is a VueJS application where there is the need to create a component that will have a left menu and a main content like the following image:

Once the view is loaded, on create method I will load left menu json and the items content json. By that time no item is going to be rendered in the main content.

Once the user selects an item from the left menu, the json for the items content is going to be filtered so that the main component renders the squares (each item component that is actually separate component).

My question here is about how many components should I build?

I guess I will have to create a component container that will hold the left menu component and the right component. Then right component will have the header and a v-for element that will render each of the item component. Is that the way to go?

Any advice?

Solution :

You can create one container component that lays out all three areas using CSS grid. Then you can have a component for each area: left-menu, header-thing, and main-content.

There’s a bit of a learning curve with grid layout, but it’s immensely useful. Modern browsers support it, but not IE.

new Vue({
el: ‘#app’,
components: {
leftMenu: {
template: ‘#left-menu-template’
},
mainContent: {
template: ‘#main-content-template’
},
headerThing: {
template: ‘<div class=”header-thing”><div>one</div><div>two</div></div>’
}
}

});
html,
body {
height: 100%;
}

#app {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto 1fr;
grid-template-areas:
‘lm h’
‘lm mc’
;
width: 100%;
height: 100%;
}

.header-thing {
background-color: #eef;
grid-area: h;
display: grid;
grid-auto-flow: column;
justify-content: start;
padding: 0.7em;
grid-gap: 1.4em;
}

.left-menu {
background-color: #efe;
grid-area: lm;
padding: 0.7em;
}

.main-content {
background-color: #fee;
grid-area: mc;
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(auto-fit, minmax(8em, 1fr));
grid-auto-rows: 1fr;
}

.content-item {
background-color: white;
border: thin solid black;
border-radius: 0.2em;
display: grid;
align-items: center;
justify-items: center;
padding: 2em 3em;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>
<header-thing></header-thing>
<left-menu></left-menu>
<main-content></main-content>
</div>

<template id=”left-menu-template”>
<nav class=”left-menu”>
<div>First item</div>
<div>Second item</div>
</nav>
</template>

<template id=”main-content-template”>
<div class=”main-content”>
<div class=”content-item”>item</div>
<div class=”content-item”>another</div>
<div class=”content-item”>another</div>
<div class=”content-item”>more</div>
<div class=”content-item”>still more</div>
<div class=”content-item”>another</div>
</div>
</template>

[Vue.js] Vue in laravel 5.7

to use vue.js in my laravel project it does not working i installed npm install which was vue.js and vue-template also installed.
this is my index.blade.php.

@extends(‘layouts.app’)
@section(‘content’)
<div id=”app”>
<p> { product } </p>
</div>
@endsection
@section(‘scripts’)
<script>
var app = new Vue({
el: ‘#app’,
data:{ product: ‘car’ } })
</script>
@endsection

this is my package.json file.

“devDependencies”: {
“axios”: “^0.18”,
“bootstrap”: “^4.0.0”,
“cross-env”: “^5.1”,
“jquery”: “^3.2”,
“laravel-mix”: “^4.0.7”,
“lodash”: “^4.17.5”,
“popper.js”: “^1.12”,
“resolve-url-loader”: “^2.3.1”,
“sass”: “^1.15.2”,
“sass-loader”: “^7.1.0”,
“vue”: “2.6.4”,
“vue-template-compiler”: “2.6.4”
}

Solution :

If you want to use laravel Frontend Scaffolding you need to create a component and run npm to compile it.

for example create a component and require it in resources/assets/app.js then use component in the blade.

already there is an example on Laravel default

ExampleComponent is a default sample for you

instead of :

@extends(‘layouts.app’)
@section(‘content’)
<div id=”app”>
<p> { product } </p>
</div>
@endsection
@section(‘scripts’)
<script>
var app = new Vue({
el: ‘#app’,
data:{ product: ‘car’ } })
</script>
@endsection

you should call component like this:

@extends(‘layouts.app’)

@section(‘content’)
<example-component></example-component>
@endsection

and some changes for the example component resources/js/components/ExampleComponent:

<template>
<div class=”container”>
<div class=”row justify-content-center”>
<div class=”col-md-8”>
<div class=”card card-default”>
<div class=”card-header”>Example Component</div>

<div class=”card-body”>
{ product }
</div>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
mounted() {
console.log(‘Component mounted.’)
},
data () {
return {
product:’car’
};
}
}
</script>

dont forget to run npm run dev to compile new changes

Second way:

of course there is another way

This way you don’t need app.js or npm install

you can directly call Vuejs script

and use @{ product } instead of { product }

[Vue.js] how to fix timing of result for getTotalLength() of svg in vuejs?

this.$refs.pathID.getTotalLength() returns 0 when it should return the length, and returns the legnth when it should return 0.

my vue.js component is a svg path element, there is a button to toggle the path. the toggle is accomplished via binding the d atttribute of the path to a property called path. there is a function that runs on mount that generates the value for the d attribute, ive set this value to a property called pathValue. so, if clicked == true then path = pathValue, else path = null. this works as expected.

further i watch path so that when there is a change, (onclick) then the path length should be recalculated, and its value set to a css custom variable.

<template>
<main>

<svg viewBox=”0 0 415 200”>
<path ref=”pathID” :d=path />
</svg>

<button @click=”show()”>nsr</button>

</main>
</template>

<script>
export default {
data() {
return {
path: null,
clicked: true,
pathValue: null,
pathLength: 0
}
},

methods: {
show() {
if(this.clicked) {
this.path = this.pathValue
this.clicked = !this.clicked
} else {
this.path = null
this.clicked = !this.clicked
}
},

generatePath() {
// generates a string value for the d-attribute were binding to path
let path = “M410 100,”
for(let i = 0; i < 5; i++) {
path += `
h-10,
q-5 -20, -10 0,
h-10,
s-5 -100, -10 -0,
s-5 50, -10 0,
h-10,
q-10 -20, -20 0,
h-5`
}
return path
}
},

mounted() {
this.pathValue = this.generatePath()
},

watch: {

path: function() {
// trigger computed setter here when path is changed onclick
this.calculatePathLength = this.$refs.pathID
},
pathLength: function() {

// set custom variable here
this.$refs.pathID.style.setProperty(“–path-length”, this.calculatePathLength)
console.log(‘value of computed property: ‘ + this.calculatePathLength)
}
},

computed: {
calculatePathLength: {
get: function() {

return this.pathLength
},
set: function(x) {

this.pathLength = x.getTotalLength()
console.log(‘path length is: ‘ + this.pathLength)
}
}
}
}
</script>

so when the button is clicked, the value of the d-attribute should be updated, the watcher should notes the change in path and the setter of the computed property calculatePathLength is called, updates the value of pathLength, then the watcher for pathLength should call the getter in setting the custom property var(–path-length).

so the expected result should be that pathLength should be logged, it is. but when it should be non-zero it is zero, and when it should be zero it is non-zero

Solution :

When you change this.path you need to give time for the svg element to redraw before the new getTotalLength() can be calculated.

vue.js provides the this.$nextTick() function exactly for this purpose. To make the code above work:

watch: {
path: function() {
// trigger computed setter here when path is changed onclick
this.$nextTick(()=>this.calculatePathLength = this.$refs.pathID);
},

Solution 2:

this question was answered on the vue.js forum here, the explanation is that the svg is not given enough time to update before measure the path length, and this is the purpose of the vue.$nextTick(). here is the code that fixes the above situation:

watch: {

path() {
this.$nextTick(() => this.pathLength = this.$refs.pathID.getTotalLength());
}
},

thank you @wildhart

[Vue.js] How to split Vue components out of a list-rendering?

I like vue.js and often use it to list options in a select box, (or sometimes divs in a flexbox). I’m wondering if there is a way to split a piece out of a for-loop during a vue.js list rendering. Like this scenario:

there is 3 options:

Option 1 - Blue
Option 2 - Green
Option 3 - Purple

to render these in a select box AND in a div below the select box, depending on which option is selected, a different div (with the color of the selected option in this example).

Is there a way to do this inside a Vue-list rendering?

Something like

<select>
<option v-for=”color in colors”>{color.color}</option>
</select>

<div>{color.color}</div> <–This doesn’t work, as it is out of the for loop

The only way I’ve been able to work around this is to make an object to hold all this stuff AND an “active element” like so:

class ColorHolder{
constructor(){
colors = []
activeColor = {};
}
}

Then, I put listeners on each color in the <option> boxes, setting the active color to whatever got clicked. Then there is a hidden component, that is shown when they click a color in the option list.

It works, but it seems like there must be a better way, as there is to manually figure out which color was clicked and display the <color-div> of the correct type. to just use the vue.js list-rendering to render a component outside of the list, keeping it linked to the component in the list.

Solution :

piggy-backing off of @husam’s answer

I would advise against using a selectedColor value. You should use index (arrays) or key (objects) so you don’t end up duplicating data (in larger applications)

new Vue({
el: “#app”,
data: {
colors: [
{color: ‘Red’},
{color: ‘Green’},
{color: ‘Blue’}
],
colIndex: 0
}
})
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.min.js"></script>

<div id=”app”>
<select v-model=”colIndex”>
<option v-for=”color, i in colors” :value=”i”>{ color.color }</option>
</select>
<div>{ colors[colIndex].color }</div>
</div>

You can also use a computed value

new Vue({
el: “#app”,
data: {
colors: [
{color: ‘Red’},
{color: ‘Green’},
{color: ‘Blue’}
],
colIndex: null
},
computed: {
selectedColor() {
return this.colors[this.colIndex] || {};
}
}
})
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.min.js"></script>

<div id=”app”>
<select v-model=”colIndex”>
<option v-for=”color, i in colors” :value=”i”>{ color.color }</option>
</select>
<div>{ selectedColor.color }</div>
</div>

Solution 2:

You can simplify things by using v-model on the select element to pick the value of the selected option and insert it into the div.

new Vue({
el: “#app”,
data: {
colors: [
{color: ‘Red’},
{color: ‘Green’},
{color: ‘Blue’}
],
selectedColor: ‘Red’
}
})
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.6/dist/vue.js"></script>

<div id=”app”>
<select v-model=”selectedColor”>
<option v-for=”color in colors” :value=”color.color”>{ color.color }</option>
</select>
<div :style=”{background: selectedColor}”>{ selectedColor }</div>
</div>

[Vue.js] Enzyme computed Error - TypeError Cannot read property 'find' of undefined

There is an error

vue.js warn]: Error in render: “TypeError: Cannot read property ‘find’ of undefined”

when I tested my vue.js component. I tried different methods but still got an undefined error. When I load All meetups it is working fine. But the problem when I would like to get a signle event

store.js

state: {
loadMeetups :[
{
imageUrl: ‘https://upload.wikimedia.org/wikipedia/commons/4/47/New\_york\_times\_square-terabass.jpg',
id: ‘afajfjadjaaadja323’,
title: ‘Meetup in New York’ ,
date:’2018-07-17’

},
{
imageUrl: ‘https://upload.wikimedia.org/wikipedia/commons/1/14/Palais\_de\_Justice\_%28Paris%29\_June\_2010.jpg',
id: ‘aadsfhbkhlk1241’,
title: ‘Meetup in Paris’,
date:’2018-07-19’
}
],
user: {
id: ‘afajfjadjaaadja323’,
registeredMeetups: [‘aadsfhbkhlk1241’]
}
}

Meeetup.vue

<template>
<v-container>
<v-layout row wrap=””>
<v-flex xs12>
<v-card>
<v-card-title>
<h3 class=”primary–text”>{ meetup.id }</h3>
</v-card-title>
<v-card-media
src=”https://upload.wikimedia.org/wikipedia/commons/4/47/New\_york\_times\_square-terabass.jpg"
height=”400px”
\>

</v-card-media>
<v-card-text>
<div class=”info–text”>17th July 2017 - Where it takes place</div>
<div>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn class=”red darken-1” dark=””>Register</v-btn>
</v-card-actions>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
props: {
id:String
},
computed:{
meetup(){
return this.$store.getters.loadedMeetup(this.id)
}
}
}
</script>

Solution :

Method has to go into a getter. So once there is defined the getter, then I can use it any component in the project under, this.$store.getters. This is working with right syntax working!!

https://vuex.vuejs.org/guide/getters.html

loadedMeetup: state => (id) => {
return state.loadedMeetups.find(meetup => meetup.id === id)
}

[Vue.js] launch method after child component has been rendered

I’m using a v-if in my parent to conditional render a child component.
Even when the child should not render the mounted function still gets executed and results in an error in console.

How does one makes sure the child component is rendered when launching a method when the child component is rendered.

In my case I’m using an autofocus:

mounted: function () {
// Autofocus input on load.
this.$nextTick(() => this.$refs.input.focus());
},

Error in nextTick: “TypeError: _this.$refs.input is undefined”

console.log(this.$refs.input) gives the object:

<input class=”form-control” data-v-661f7e55=”” type=”text” autocomplete=”off”>

Solution :

Try this.

<input class=”form-control” ref=”input” type=”text” autocomplete=”off”>

mounted(){
this.$nextTick(() => this.$refs.input.focus())
}

This is working fine for me.ref is used to register a reference to an element or a child component.

[Vue.js] Vue JS Sweetalert Confirm refresh module

Hi guys I’m using sweetalerts to present alerts to my users, in this case, is a confirmation alert and it’s working fine, the only thing is after complete I would like to refresh the module, not the whole page.

As right now I’m using this.$router.go(0) but is refreshing the whole page.

Or Update the Array so the table just shows the updated information:

Again ON delete remove the deleted item without refreshing the whole page

HTML

<v-data-table :headers=”headers2”
:items=”records2”
:pagination.sync=”pagination2”
:search=”search2”>
<template slot=”items” slot-scope=”records”>
<td class=”text-xl-left”>{ records.item.sid }</td>
<td class=”text-xl-left”>{ records.item.firstName } { records.item.lastName }</td>
<td class=”text-xs-left”><a :href=”‘mailto:’+ records.item.email”>{ records.item.email }</a></td>
<td class=”text-xs-left”>{ records.item.phone }</td>
<td class=”text-xs-left”>{ records.item.date }</td>
<td class=”justify-center layout px-0”>
<v-icon small
class=”mr-4”
@click=”editItem(records.item.email)”>
visibility
</v-icon>
</td>
<td>
<v-icon small
v-on:click=”showAlert(records.item.id)”>
delete
</v-icon>
</td>
</template>
<v-alert slot=”no-results” :value=”true” color=”error” icon=”warning”>
the search for “{ search2 }” found no results.
</v-alert>
</v-data-table>

Script

<script>
import vue.js from ‘vue’
import api from ‘../store/api.js’

export default {
data() {
return {
pagination: {
descending: true,
rowsPerPage: 10
},
pagination2: {
rowsPerPage: 10
},
search: ‘’,
search2: ‘’,
records: [],
records2: [],
total: [],
confirm: false,
headers: [
{ text: ‘SID’, value: ‘sid’, sortable: true },
{ text: ‘Full Name’, value: ‘FullName’, sortable: true },
{ text: ‘Email’, value: ‘Email’, sortable: true },
{ text: ‘Phone’, value: ‘PhoneNumber’, sortable: true },
{ text: ‘Date’, value: ‘Date’, sortable: true},
{ text: ‘Quarter’, value: ‘Quarter’, sortable: true },
{ text: ‘Profile’, value: ‘name’, sortable: false }
],
headers2: [
{ text: ‘SID’, value: ‘sid’, sortable: true },
{ text: ‘Full Name’, value: ‘FullName’, sortable: true },
{ text: ‘Email’, value: ‘Email’, sortable: true },
{ text: ‘Phone’, value: ‘PhoneNumber’, sortable: true },
{ text: ‘Date’, value: ‘Date’, sortable: true },
{ text: ‘Profile’, value: ‘name’, sortable: false },
{ text: ‘Delete’, value: ‘delete’, sortable: false }
]

};
},
created() {
api.GetAllInquiries().then((response) => {
this.records = response.data;
});
api.GetAllApplications().then((response) => {
this.records2 = response.data;
});
api.GetTotalInquiries().then((response) => {
this.total = response.data;
});
},
methods: {
editItem(email) {
this.$router.push({ name: ‘Profile’, params: { email: email } });
},
showAlert(id) {
// Use sweetalert2
this.$swal.fire({
title: ‘Are you sure?’,
text: “You won’t be able to revert this!”,
type: ‘warning’,
showCancelButton: true,
confirmButtonColor: ‘#3085d6’,
cancelButtonColor: ‘#d33’,
confirmButtonText: ‘Yes, delete it!’
}).then((result) => {
if (result.value) {
this.$http.post(‘/api/deleteAddddddddpplication/‘,
{
ID: id
})
this.$swal.fire(
‘Deleted!’,
‘the file has been deleted.’,
‘success’)
}
})
}

}
}
</script>

Solution :

Basically just add the api call to the response portion of the showAlert function. I’m assuming that they are responsible for populating the tables.

showAlert(id) {
// Use sweetalert2
this.$swal.fire({
title: ‘Are you sure?’,
text: “You won’t be able to revert this!”,
type: ‘warning’,
showCancelButton: true,
confirmButtonColor: ‘#3085d6’,
cancelButtonColor: ‘#d33’,
confirmButtonText: ‘Yes, delete it!’
}).then((result) => {
api.GetAllInquiries().then((response) => {
this.records = response.data;
});
api.GetAllApplications().then((response) => {
this.records2 = response.data;
});
api.GetTotalInquiries().then((response) => {
this.total = response.data;
});
if (result.value) {
this.$http.post(‘/api/deleteAddddddddpplication/‘,
{
ID: id
})
this.$swal.fire(
‘Deleted!’,
‘the file has been deleted.’,
‘success’)
}
})

[Vue.js] Vuex store unable to update component data

when trying to create a HN clone in 2 panes, but for some reason my vuex store is unable to update the component data.

This is the project link since there are too many files involved.
https://github.com/karansinghgit/hn-vue

This is what it looks like. My aim is to click on one of the articles on the left, and display the hn article with its comments on the right.
So far, there is understood that I need to use vuex to share data but the sharing is not taking place.

It just displays a function signature, when it to display the article ID.

Solution :

The problem is in the store.js file. You are setting the default state for currentStory to Number. Setting it to an actual number instead should solve the problem:

export const store = new Vuex.Store({
state: {
currentStory: 0
},
mutations: {
setCurrentStory(state, ID) {
state.currentStory = ID
}
},
getters: {
currentStory: state => state.currentStory
}
})

Additionally, in story.vue, it is unnecessary to specify storyID in the data as you already have it as a computed property (there might be an error thrown for duplicate keys)

Solution 2:

the story component (story.vue) has a duplicate data and computed property storyID. Remove it from the data hash.

<template>
<div id=”story”>
{storyID}
</div>
</template>

<script>
export default {
name: ‘story’,
data: function(){
return {
story: Object,
// Remove this –> storyID: this.$store.getters.currentStory
}
},
computed: {
storyID() {
return this.$store.getters.currentStory
}
}
}
</script>