link1644 link1645 link1646 link1647 link1648 link1649 link1650 link1651 link1652 link1653 link1654 link1655 link1656 link1657 link1658 link1659 link1660 link1661 link1662 link1663 link1664 link1665 link1666 link1667 link1668 link1669 link1670 link1671 link1672 link1673 link1674 link1675 link1676 link1677 link1678 link1679 link1680 link1681 link1682 link1683 link1684 link1685 link1686 link1687 link1688 link1689 link1690 link1691 link1692 link1693 link1694 link1695 link1696 link1697 link1698 link1699 link1700 link1701 link1702 link1703 link1704 link1705 link1706 link1707 link1708 link1709 link1710 link1711 link1712 link1713 link1714 link1715 link1716 link1717 link1718 link1719 link1720 link1721 link1722 link1723 link1724 link1725 link1726 link1727 link1728 link1729 link1730 link1731 link1732 link1733 link1734 link1735 link1736 link1737 link1738 link1739 link1740 link1741 link1742 link1743 link1744 link1745 link1746 link1747 link1748 link1749 link1750 link1751 link1752 link1753 link1754 link1755 link1756 link1757 link1758 link1759 link1760 link1761 link1762 link1763 link1764 link1765 link1766 link1767 link1768 link1769 link1770 link1771 link1772 link1773 link1774 link1775 link1776 link1777 link1778 link1779 link1780

[Vue.js] No notification to allow android app to use camera

I’m developping an app with vue-js and cordova. This app use the phone’s camera to take some pictures but i don’t know how to ask the user to allow my app to use the camera.

I’ve tried to use cordova-plugin-android-permissions but it didn’t make great results.

( cordova plugin add cordova-plugin-android-permissions )

I set this in my main.js :

var permissions = cordova.plugins.permissions
permissions.checkPermission(permissions.CAMERA, success, null)

function error () {
console.warn(‘Camera permission is not turned on’)
}
function success (status) {
if (!status.checkPermission) {
permissions.requestPermissions(
permissions.CAMERA,
function (status) {
if (!status.checkPermission) {
error()
}
},
error)
}
}

I got only a white screen on my app and my build send me this :

cordova is not defined

I’d like to test to import cordova but i’m not sure about the path of my import.

I’m also not sure if my method is good and if there are other methods to ask for device autorisation.

Solution :

You use cordova in the wrong way.

You have to wait it to load. TO do that, you have to listen to cordovo ready event.

document.addEventListener(‘deviceready’, () => {
const permissions = cordova.plugins.permissions;
// the code here

Link: https://github.com/NeoLSN/cordova-plugin-android-permissions/issues/13

futhermore, you perhapse need to use ‘import VueCordova from ‘vue-cordova’’
I’m not sur about this but it’s a track

import VueCordova from ‘vue-cordova’

Vue.use(VueCordova)

In data of the component

cordova: Vue.cordova

Solution 2:

did you tried to add the following lines in the AndroidManifest.xml:

<uses-permission android:name=”android.permission.CAMERA” />
<uses-permission android:name=”android.permission.FLASHLIGHT” />
<uses-feature android:name=”android.hardware.camera” android:required=”true” />

as shown in this post:
Cordova App ‘Android permission Cordova plugin’ is not showing permission dialog

[Vue.js] How to display multiple headers

when trying to display multiple headers all on the same horizontal line. So far, when able to display two of them, but the third keeps falling down a line. The following is an image of the what it currently looks like:

current display

The current code to display the headers:

<header>
<h1 class=”text-sm display-3 font-weight-thin “ style=”text-align:center;float:left;” >Amazon</h1>
<h1 class=”text-sm display-3 font-weight-thin “ style=”text-align:center;float:center;”>BestBuy</h1>
<h1 class=”text-sm display-3 font-weight-thin “ style=”text-align:right;float:right;”>Target</h1>
<hr style=”clear:all;”/>
</header>

Solution :

By Using Float left and defining the width we can easily display the Headers without much complexity of code.

<header>
<h1 class=”text-sm display-3 font-weight-thin “ style=” width:30%; text-align:left; float:left;” >Amazon</h1>
<h1 class=”text-sm display-3 font-weight-thin “ style=” width:40%; text-align:center; float:left;”>BestBuy</h1>
<h1 class=”text-sm display-3 font-weight-thin “ style=”width:30%; text-align:right;float:left;”>Target</h1>
<hr style=”clear:all;”>
</header>

Solution 2:

The trick to get Target onto the same line was to add display: inline-block; to the style of each <h1>.
The trouble then became centering BestBuy, which was done by setting it to position: absolute; and centering it based on window size with left: 50%; transform: translateX(-50%);.

Final working code:

<header>
<h1 class=”text-sm display-3 font-weight-thin “ style=”text-align:left; display:inline-block” >Amazon</h1>
<h1 class=”text-sm display-3 font-weight-thin “ style=”position: absolute; text-align:center; left: 50%;transform: translateX(-50%); display:inline-block;”>BestBuy</h1>
<h1 class=”text-sm display-3 font-weight-thin “ style=”text-align:right; float: right; display:inline-block”>Target</h1>
<hr style=”clear:all;”>
</header>

[Vue.js] Is there a way to pass object property in v-for to Vue data?

I’m using axios to fetch API data from https://jsonplaceholder.typicode.com. there is been trying to get the name of the user based on the userId of each post so that I can display it in html.

ex:
POSTS

post.id = 1
post.userId = 1

USERS

user.id = 1
user.name = Leanne Graham

Here is my HTML so far. I’ve tried v-model for post.userId, but for now I don’t know how to pass this to data.

<div id=”app”>
<input class=”search” placeholder=”Search post” v-model=”search”>
<div class=”post-card” v-for=”post in filteredPosts” v-model=”post.userId”>
<h1>{post.title}</h1>
<p>{post.userId}</p>
</div>
</div>

<script src=’https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js'></script>
<script src=’https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js'></script>

Here is my .js file. As you can see I commented out my attempt to fetch user details. I’ve tried doing “res.data.name” but upon trying it out in the console, I got “undefined.”

var vm = new Vue({
el: ‘#app’,
data() {
return {
posts: [],
users: [],
search: ‘’,
}
},
created(){
const baseURL = ‘https://jsonplaceholder.typicode.com';

axios.get(baseURL + ‘/posts?_limit=20’)
.then(res => this.posts = res.data)
.catch(err => console.log(err));

// axios.get(baseURL + ‘/users’ )
// .then(res => this.users = res.data.name)
// .catch(err => console.log(err));
},
computed: {
filteredPosts() {
return this.posts.filter(post => {
return post.title.toLowerCase().includes(this.search.toLowerCase())
})
}
}
})

Thanks a lot!

Solution :

I think that this is what you mean / try to achieve. You can’t really pass data that way using V-model. Instead, I filter the user array to match the post ID using users.find.

The find() method returns the value of the first element in the array that satisfies the provided testing function. More info on .find here .

I’ve created an example below.

var vm = new Vue({
el: ‘#app’,
data() {
return {
posts: [],
users: [],
}
},
created() {
const baseURL = ‘https://jsonplaceholder.typicode.com';

axios.get(baseURL + ‘/posts?_limit=20’)
.then(res => {

this.posts = res.data
})
.catch(err => console.log(err));

axios.get(baseURL + ‘/users/‘)
.then(res => this.users = res.data)
.catch(err => console.log(err));
}
})
<script src=”https://unpkg.com/axios/dist/axios.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>

<div class=”post-card” v-for=”post in posts”>
<h1>{post.title}</h1>
<p>Post ID: {post.userId}</p>
<p>Username: {users.find(user => user.id === post.userId).name}</p>
</div>
</div>

Solution 2:

Try with

<div id=”app”>
<div class=”post-card” :key=”post.title” v-for=”post in posts”>
<h1>{post.title}</h1>
<p>{post.userId}</p>
</div>
</div>

v-for=”post in posts” //posts == this.posts

[Vue.js] Refused to apply style from '' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

there is a Vue.js project, when I check the console found this issue bellow:

Refused to apply style from ‘http://localhost:8080/dist/cropper.min.css' because its MIME type (‘text/html’) is not a supported stylesheet MIME type, and strict MIME checking is enabled.

I searchedSO, found a Angular related post, but it do not helps me, they are based on different frontend framework.

Solution :

The usual reason for this error message is that when the browser tries to load that resource, the server returns an HTML page instead, for example if the router catches unknown paths and displays a default page without a 404 error. Of course that means the path does not return the expected CSS file / image / icon / whatever.

To make sure you are in that case, copy the path and try to access it directly in a new browser window or tab. You will see what the server sends.

The solution is to find the correct path and router configuration so that you get the plain CSS file / image / etc. when accessing that path.

The exact path and router configuration depends on how you have setup the project and the framework you are using.

Solution 2:

You provided insufficient information. But i had the same problem, so there is a solution.

Say you @import css files in a component’s style block. So my problem was in path that i specified. And the error message Refused to apply style appeared because of wrong path. I thought that my src path alias ~ is resolved in a style block, but it wasn’t.

All i had to do is to specify /src/assets/css… instead of ~/assets/css…

[Vue.js] Deploy VueJS project on GCloud AppEngine

I’m building a VueJS app with Vuex and a NodeJS API to Gcloud AppEngine.

I’ve pushed succefully my API to appengine and it works perfectly.

Now the problem is VueJS. What should include in the app.yaml ?

Already tried with

runtime: php55
threadsafe: true

handlers:
- url: /
static_files: dist/index.html
upload: dist/index.html

- url: /(.*)
static_files: dist/\1
upload: dist/(.*)

But it pushed 19000 files wich is really too big for AppEngine (10 000 max)

What files can be avoided ? And how ?

Thanks a lot

Solution :

You should build the vuejs project(probably npm run build) and only deploy the built files only(several files).

refer to https://cli.vuejs.org/guide/build-targets.html for details
https://cli.vuejs.org/guide/deployment.html#general-guidelines

[Vue.js] How to transfer post from one component to another?

Good afternoon, please tell me. when training now using Vuex and I cannot transfer the post from one component to another. there is a component Pagination, where all the posts and the history component are stored where and should send the first 5 posts that I click on to visit them. That is, it should work approximately as a history of viewing posts. I wrote some code here, but my posts are not displayed, tell me what I’m doing wrong and how to fix it.

Component code where all posts are stored:

<template>
<div class = “app”>
<ul>
<li v-for=”(post, index) in paginatedData” class=”post” :key=”index”>
<router-link :to=”{ name: ‘detail’, params: {id: post.id, title: post.title, body: post.body} }” @click=”addPostToHistoryComp(post.id, post.title, post.body)”>
<img src=”src/assets/nature.jpg”>
<p class=”boldText”> { post.title }</p>
</router-link>
<p> { post.body }</p>
</li>
</ul>
<div class=”allpagination”>
<button type=”button” @click=”page -=1” v-if=”page > 0” class=”prev”><<</button>
<div class=”pagin”>
<button class=”item”
v-for=”n in evenPosts”
:key=”n.id”
v-bind:class=”{‘selected’: current === n.id}”
@click=”page=n-1”>{ n } </button>
</div>
<button type=”button” @click=”page +=1” class=”next” v-if=”page < evenPosts-1”>>></button>
</div>
</div>
</template>

<script>
import {mapState} from ‘vuex’
export default {
name: ‘app’,
data () {
return {
current: null,
page: 0,
visiblePostID: ‘’,
}
},
mounted(){
this.$store.dispatch(‘loadPosts’)
},
computed: {
posts(){
return this.$store.state.posts
},
search(){
return this.$store.state.sSearch
},
evenPosts: function(posts){
return Math.ceil(this.posts.length/6);
},
paginatedData() {
const start = this.page * 6;
const end = start + 6;
return this.filteredPosts.slice(start, end);
},
filteredPosts() {
return this.posts.filter((post) => {
return post.title.match(this.search);
});
},
},
methods: {
addPostToHistoryComp(val){
this.$store.dispatch(‘transforPostToHistoryComp’, { // actions
pTitle: val.post.title,
pBody: val.post.body,
pId: val.post.id
})
},
}
}
</script>

The code of the History component where the last 5 posts that were opened should be displayed:

<template>
<div class=”history”>
<ul>
<li v-for=”(historyPost, index) in historyPosts” class=”post” :key=”index”>
<img src=”src/assets/nature.jpg”>
<p class=”boldText”> { post.title }</p>
<p> { post.body }</p>
</li>
</ul>
</div>
</template>

<script>
export default{
computed: {
historyPosts(){
return this.$store.state.historyPosts
},
},

}
</script>

And the code of my story (Vuex):

export default new vuex.Store({
state: {
posts: [],
sSearch: ‘’,
title: ‘’,
body: ‘’,
id: Number,
historyPosts: []
},
actions: {
loadPosts ({commit}) {
axios.get(‘http://jsonplaceholder.typicode.com/posts').then(response => {
let posts = response.data
commit(‘SET_POSTS’, posts)
}).catch(error => {
console.log(error);
})
},
transforTitleAndBody({commit}, payload){ // sSearch
const todo = {
title: payload.sTitle,
body: payload.sBody,
id: payload.sId
}
axios.post(‘http://jsonplaceholder.typicode.com/posts', todo).then(_ => {
commit(‘ADD_TODO’, todo)
}).catch(function (error) {
console.log(error);
})
},
transforPostToHistoryComp({commit}, payload){ // sSearch
const todohistory = {
title: payload.pTitle,
body: payload.pBody,
id: payload.pId
}
commit(‘ADD_TODO_HISTORY’, todohistory)
}
},
mutations: {
SET_POSTS(state, posts) {
state.posts = posts
},
transforSearch(state, payload){ // sSearch
state.sSearch = payload
},
ADD_TODO (state, todoObject) {
state.posts.unshift(todoObject)
},
ADD_TODO_HISTORY (state, todohistoryObject) {
state.historyPosts.unshift(todohistoryObject)
},
},
})

Solution :

I found what happening. You have some erros on code of the file Pagination.vue

You was putting @click under , that doesn’t work because router link change the page with preventing effect any other event before leave.

I made some changes on template and script. I think will work.

<template>
<div class=”app”>
<ul>
<template v-for=”(post, index) in paginatedData”>
<li class=”post” :key=”index” @click=”addPostToHistoryComp(post)”>
<img src=”src/assets/nature.jpg”>
<p class=”boldText”>{ post.title }</p>
<p>{ post.body }</p>
</li>
</template>
</ul>
<div class=”allpagination”>
<button type=”button” @click=”page -=1” v-if=”page > 0” class=”prev”><<</button>
<div class=”pagin”>
<button
class=”item”
v-for=”n in evenPosts”
:key=”n.id”
v-bind:class=”{‘selected’: current === n.id}”
@click=”page=n-1”
\>{ n }</button>
</div>
<button type=”button” @click=”page +=1” class=”next” v-if=”page < evenPosts-1”>>></button>
</div>
</div>
</template>

<script>
import { mapState } from “vuex”;
export default {
name: “app”,
data() {
return {
current: null,
page: 0,
visiblePostID: “”
};
},
mounted() {
this.$store.dispatch(“loadPosts”);
},
computed: {
posts() {
return this.$store.state.posts;
},
search() {
return this.$store.state.sSearch;
},
evenPosts: function(posts) {
return Math.ceil(this.posts.length / 6);
},
paginatedData() {
const start = this.page * 6;
const end = start + 6;
return this.filteredPosts.slice(start, end);
},
filteredPosts() {
return this.posts.filter(post => {
return post.title.match(this.search);
});
}
},
methods: {
addPostToHistoryComp(post) {
this.$store.dispatch(“transforPostToHistoryComp”, {
pTitle: post.title,
pBody: post.body,
pId: post.id
});

this.$router.push({
name: “detail”,
params: { id: post.id, title: post.title, body: post.body }
});
}
}
};
</script>

[Vue.js] null when append data to FormData()

there is data structure like this on vue

data: {
name: ‘Lorem’,
status: ‘Active’,
username: ‘user-01’,
password: ‘12345’
},

then I append to FormData() because to send blob data (image) to the server, like this

let formData = new FormData(this.data); // my data
formData.append(‘photo’, this.blob);

I use axios, the image are sent but data is not, when I display formData.entries() on console, the result is

photo, [object File]

How I can solve this? thanks

Solution :

Rembermer FormData has no Constructor that takes JSON data as an argument.

Try this

let formData = new FormData();
for ( var key in data ) {
formData.append(key, data[key]);
}
formData.append(‘photo’, this.blob);
for (var pair of formData2.entries()) {
console.log(pair[0]+ ‘, ‘ + pair[1]);
}

[Vue.js] Updating prop value in child component from parent Vue

So, to update a prop in my child component when my parent component updates the value. But I’m doing this a little differently due to which I’m having a problem where the child prop is NOT getting updated.

meet.vue

<template>

<div>{ meet.name } </div>

</template>

props: [“meet”]

time.vue

<template>

<meet :meet=”showMeet(e.id)” /> // id is coming because meet is in a v-for
</template>

props: [‘events’],

methods: {
showMeet(id) {
this.events.forEach(e => { if(e.id === id) return e})
}
}

activity.vue

<template>

<time :events=’events’ ref=”time” />

</template>

methods: {
sendEvents(event) {
// some manipulation to event
this.$refs.time.showMeet(event.id)
}
}

So as you can see form the components above, I’m manipulating some data (event) in activity.vue.js and calling showMeet() which is in the child component. to update the value in meet.vue.js from activity.vue.

I thought this would work, but it doesn’t. I feel its because the prop “meet” in time.vue.js is getting its value from a function when it calls it. But in other case (where the parent, activity.vue.js calls it), the prop “meet” doesn’t get any value returned. Hence the prop in meet.vue.js is not updated.

Any idea how to update the child? I’m not sure this is the right way to do it, but if someone has a better way, please do let me know. Thank you!

Solution :

From vue.js docs https://vuejs.org/v2/guide/components-props.html#One-Way-Data-Flow

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around.

If you want to update prop you should update parents data instead.
For example, you can use $emit(‘input’, value) as shown here
https://vuejs.org/v2/guide/components.html#Using-v-model-on-Components

[Vue.js] update follow status after axios request in Vue

i need to update the follow an unfollow button after axios request

<template>
<div v-if=”isnot”>
<a href=”#” @click.prevent=”unfellow” v-if=”isfollowing” >unFellow</a>
<a href=”#” @click.prevent=”fellow” v-else >Fellow</a>
</div>
</template>

My Methods

fellow () {
axios.post(`/@${this.follower}/follow/`)
},
unfellow () {
axios.post(`/@${this.follower}/unfollow/`)
},
}

Solution :

A basic example:

fellow () {
var self = this;
axios.post(`/@${this.follower}/follow/`)
.then(function (response) {
self.isfollowing = true;
})
.catch(function (error) {
console.log( error.response.data);
});
},

Solution 2:

Axios has a series of methods you can execute after the response arrives. In the case of a post call the structure can be something like this

axios.post(the ROUTE)
.then(function (response) {
//executes after getting a successful response
// here you can change the ‘isfollowing’ variable accordingly

})
.catch(function (error) {
//executes after getting an error response
});

Solution 3:

Fast way:

<template>
<div v-if=”isnot”>
<a href=”#” @click.prevent=”fellowUnfellow” v-if=”isfollowing” >{isfollowing ? “unFellow” : “Fellow”}</a>
</div>
</template>

fellowUnfellow () {
axios.post(`/@${this.follower}/follow/`).then(function (r) {
this.isfollowing = !this.isfollowing;
})
}

[Vue.js] VueJS bind style with class selector

to implement something very simple here, something in CSS:

.p {
color: /*something from javascript logic*/;
}

By checking the VueJS document, there is one way to achieve this by Style binding:

<p :style=”{color:/*something from javascript*/}”> … </p>

However, to do so, it means that I need to add every p tag such line, and it’s not really a good solution.

What I want, is just like the beginning of the question, write something like

.p {
color: {mycolor};
}

So that I can do it once, apply everywhere.

Is there a neat way to do this? Namely apply a class selector in VueJS style binding? Thank you very much!

Solution :

There’s no standard way of doing it in Vue.

There’s a workaround/solution, though, which is just a custom component (say <v-style> or whatever you choose to name it), so it’s as reusable as any other component, and all of Vue’s goods — like v-if — can be used on its tag. Here’s how it’d look:

Vue.component(‘v-style’, {
render: function (createElement) {
return createElement(‘style’, this.$slots.default)
}
});

// demo usage, check the template
new Vue({
el: ‘#app’,
data: {
myColor: ‘red’
}
})
<script src=”https://unpkg.com/vue"></script>

<div id=”app” class=”stuff”>
<v-style>
.p {
color: {myColor};
}
</v-style>

<div class=”p”>
Remove “red” and type “yellow”:
<input class=”setting” type=”text” v-model=”myColor”>
</div>
</div>

Caveats: the styles generated will be there only as long as the component is!

Another minor drawback is that since the name of the tag is <v-style> (or whatever you chose to call it) and not <style>, the IDEs may not color it nicely. But otherwise it’ll just be like a regular <style> tag.