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

[Vue.js] Get data from background script into popup.html Subscribe to RSS

when trying to get the current tab url from background.js and render it onto the popup.html. How can I do the same? when using the Vuejs framework to create a plugin.

I tried sending the data as a message from background.js to popup. But the onClicked event does not allow it to be run on the popup.

I expect to have the url of the current open tab in the popup plugin, with which I intend to do other things.

Solution :

I think you can save the data to chrome.storage.local right in the backgroundt and detect this fact in the popup using chrome.storage.onChanged event.

[Vue.js] Is Vue.js Incompatible With Serving POST Requests? Subscribe to RSS

I’m trying to do [thing] with a Vue.js project created with vue.js CLI. [Thing] is not super-important to this question, so I’ll omit it for the sake of brevity. I’ve noticed when I run the local web server for this project with

$ npm run serve

that GET requests work just fine; but POST requests give me a 404 - “Cannot POST”. I need to be able to do both.

Using Express, it’s straightforward to serve the same page with both GET and POST by simply adding router.post(…) in addition to the default router.get(…). However, in Vue.js this seems difficult.

I’ve spent some time playing with vue.js Router, but poring over the documentation I haven’t found a configuration option to tell it “Here’s how to respond to a POST request” - it seems to require GET.

But maybe I’m trying to pound a square peg into a round hole. Vue.js is geared toward applications that run in the browser, and browsers send GET requests (For the moment I’m not interested in form submissions…) where POST requests tend to be more of a web app/integration/back end kind of a thing.

What do you guys think - is there something obvious I’m missing, or should I do this the “easy” way and switch to Express?

Solution :

vue.js Router is not receiving a (GET) request and responding, it is simply reading the current URL and inserting the corresponding component. So in short, no, there is no POST request handler… I’d argue it’s not even handling GET requests either, just reading the URL which looks like a GET request.

If you are trying to POST between pages inside the app, Vuex is what you want.
If you are trying to POST to the app from outside, having an actual server listening for requests which you can ping will be easier (ie Express).

There may be a way to use Axios to do this from the app. It can listen to responses from POST requests, so if it were listening I don’t see why it couldn’t receive. However, I suspect you’d have to listen to a port from the machine where the app is running which would be a major security issue (if a client’s browser/OS/Antivirus even let you).

[Vue.js] Why Google map does not work on the site? Subscribe to RSS

Good afternoon, please tell me who knows, when now learning to add a Google map to the site and do it with this article. I did everything as it was indicated, but the card does not work, please tell me why? Where did I make a mistake? Api-key is correct 100%. And I turn on the map in Google Cloud Platform. I use vue.js cli Webpack-simple. My project on GitHub

Screenshot of a broken map

Console Error

Code of index.html:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8”>
<title>google_map</title>
</head>
<body>
<div id=”app”></div>
<script src=”/dist/build.js”></script>
<script src=”https://maps.googleapis.com/maps/api/js?key=\[MY\_API\_KEY\]"></script>
</body>
</html>

Component Google.map:

<template>
<div class=”google-map” :id=”name”></div>
</template>

<script>
export default {
name: ‘google-map’,
props: [‘name’],
data: function () {
return {
map: ‘’
}
},
computed: {
mapMarkers: function () {
return this.markers
}
},
mounted: function () {
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
},
methods: {}
}
</script>

<style scoped>
.google-map {
width: 640px;
height: 480px;
margin: 0 auto;
background: gray;
}
</style>

Code of App.vue:

<template>
<div class=”container”>
<google-map :name=”name”></google-map>

</div>
</template>
<script>
import googleMap from ‘./components/googleMap.vue’

export default {
data: function () {
return {
name: ‘map’,
}
},
mounted: function () {
},
components: {googleMap}
}
</script>

Solution :

Looking at the original code, before you started trying to use GoogleMapsLoader, the error was very simple; you were trying to use window.google in the compiled JS, before it was loaded through googleapis.com. To fix, in the index.html, simply change this:

<script src=”/dist/build.js”></script>
<script src=”https://maps.googleapis.com/maps/api/js?key=\[MY\_API\_KEY\]"></script>

To this:

<script src=”https://maps.googleapis.com/maps/api/js?key=\[MY\_API\_KEY\]"></script>
<script src=”/dist/build.js”></script>

If you want to use GoogleMapsLoader, please follow the documentation they provide; you should be wrapping any calls to the Google Maps API inside a callback function that the loader calls. There are a bunch of different approaches to how to do this, and almost definitely a better way to set up a global instance, but to at least make the code work, this is how you would need to code the mounted function:

mounted: function () {
GoogleMapsLoader.KEY = ‘[MY_API_KEY]‘;
GoogleMapsLoader.load(function(google){
const element = document.getElementById(this.name)
const options = {
zoom: 14,
center: new google.maps.LatLng(59.93, 30.32)
}
this.map = new google.maps.Map(element, options)
}.bind(this));
}

[Vue.js] Howler.JS not playing audio when played from method with vue Subscribe to RSS

I’m trying to play an audio file using Howler.JS on a vue.js page. Due to the Chrome AudioContext policy issue, I decided to wait for user interaction which will fire a method to start playing the audio file. However, no audio is played. I’ve checked and confirmed that the method is running so it seems to be something wrong with the Howler.JS part of the code.

I’m running the page on Chrome 75.0.3770.100 (Official Build) (64-bit) on macOS Mojave 10.14.5 (18F132) with Vue.JS 2.6.10 and Howler.JS 2.1.2. I found this solution (have not tried it) Howler.js doesn’t recognize src path to audio file but it is not applicable as vue-howler is unmaintained.

<script>
import { Howl, Howler } from ‘howler’;

export default {
name: ‘Lobby’,
data() {
return {
userInteracted: false,
}
},
methods: {
interacted: function () {
this.userInteracted = true

var sound = new Howl({
src: [require(‘../assets/waiting.mp3’)]
});

sound.play();
}
}
};
</script>

Solution :

You can play sounds the same way via HTML5 Audio

register playSound() as a global method

Vue.prototype.$playSound = (path, volume = 1) => {
var audio = new Audio(path);
audio.volume = volume
audio.play();
}

this.$playSound(‘sounds/click.wav’)

<button @click=”$playSound(‘sounds/click2.wav’)”>Click me!</button>

[Vue.js] How to check if an array contains an item from another array from within vue.js template Subscribe to RSS

I’m trying to figure out how to show job.name if the job.name from jobs is also in anotherArray.

<li v-for=’job in jobs’>
<template v-if=”job.name in anotherArray”
{ job.name }
</template>
</li>

note anotherArray is structured the same way as the jobs array. So to be checking element.name in anotherArray

How can I do this?

Solution :

You can use computed to get list of anotherArrayName, then create a method to check using includes

computed: {
anotherArrayName() {
return this.anotherArray.map(item => item.name)
}
},
methods: {
isInclude(name) {
return this.anotherArrayName.includes(name)
}
}

and in template

<li v-for=’job in jobs’>
<template v-if=”isInclude(job.name)”
{ job.name }
</template>
</li>

[Vue.js] Vuejs 2 terminal directives or higher priority directives? Subscribe to RSS

I’m trying to create an autovivification directive for my vue.js app.

So basically if my data has a user object, e.g. {user:{} and I create the following input:

<input type=”text” v-model=”user.info.name.first” v-autovivify>

My directive will automatically create the desired path inside the user object, e.g. user.info.name.first (similar to how it worked in Angular 1.0)

My problem is that before my v-autovivify directive is called, v-model already evaluates and throws an error:

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

But I do know this can be done, because here is a trick I’m using to autovivify objects right now:

The vivify methods just creates the nested object and returns true

methods: {
vivifyUser() {
//this should of course check if the path exist but removed for brevity.
this.user = {name: {first: {salut: ‘’}};
return true;
}
// other methods, etc…

What this means is v-if is called before v-model is evaluated and so I’m able to create the path and no error is thrown.

So my question is how can I set the priority of my directive higher than v-model (just like v-if has a priority)?

Solution :

Add a v-if to delay the rendering of the element.

<input v-if=’user.info’ type=”text” v-model=”user.info.name.first” v-autovivify>

or even more general

<input v-if=’user && user.info’ type=”text” v-model=”user.info.name.first” v-autovivify>

This is a common pattern used when working with async-computed properties.

[Vue.js] Parcel vue debugging How can I map the output of parcel serve to my source code? Subscribe to RSS

When I serve my vue.js js app, I’m using parcel serve index.html
In the app, I placed a debugger keyword.

When running the app and open the dev tools in chrome I got something like this

It stops at some random line while I actually wanted to debug on the other part of my code

How can I map the breakpoint to the intended part? does parcel able to do this? IIRC that called source map, right?
I read the docs seems only has the option to disable the source map

Solution :

Ok, seems there is to delete the dist and .cache folder
now it works again

[Vue.js] Dominate vue router with Laravel router Subscribe to RSS

when building an application with Laravel and Vue.js. when using vue.js router. With this when controlling all routes. Now, to make an url xyz.com/admin which will different (Laravel new route, to work with this admin separately). when using this below code, but not working.

Route::get(
‘/admin/{view?}’,
“AdminController@index”
);

Route::view(‘/{any}’, ‘home’)->where(‘any’, ‘.*‘);

I also remove the admin link from <router-link>

<v-list-tile-title v-if=”isAdminMethod===true”>
<a href=”/admin”>Admin Panel</a>
</v-list-tile-title>

<v-list-tile-title v-else>
<router-link :to=”{ path: i.to }”>
{ i.title}
</router-link>
</v-list-tile-title>

Solution :

How about you try something like

Route::get(
‘/admin/{view?}’,
“AdminController@index”
);

or it might be worth looking into something like InertiaJS.

Let me know if you have any further queries.

[Vue.js] Regex + vee-validate Subscribe to RSS

I use vue.js and vee-validity. I need help with regex.

Firstname and lastname

First letter big, others small
Allow only letters and UTF-8 characters such as “,,,,,,,,”
Do not allow numbers, spaces or special characters

Nickname

Allow only letters (big, small), numbers and UTF-8 characters (same)
Max 13 characters

Template

v-validate=”{required: true, regex: /^[a-zA-Z]+$/ }”

Solution :

For the First name you can use:

^([A-Z\xC0-\xD6\xD8-\xDE\u0100\u0102\u0104\u0106\u0108\u010A\u010C\u010E\u0110\u0112\u0114\u0116\u0118\u011A\u011C\u011E\u0120\u0122\u0124\u0126\u0128\u012A\u012C\u012E\u0130\u0132\u0134\u0136\u0139\u013B\u013D\u013F\u0141\u0143\u0145\u0147\u014A\u014C\u014E\u0150\u0152\u0154\u0156\u0158\u015A\u015C\u015E\u0160\u0162\u0164\u0166\u0168\u016A\u016C\u016E\u0170\u0172\u0174\u0176\u0178\u0179\u017B\u017D\u0181\u0182\u0184\u0186\u0187\u0189-\u018B\u018E-\u0191\u0193\u0194\u0196-\u0198\u019C\u019D\u019F\u01A0\u01A2\u01A4\u01A6\u01A7\u01A9\u01AC\u01AE\u01AF\u01B1-\u01B3\u01B5\u01B7\u01B8\u01BC\u01C4\u01C7\u01CA\u01CD\u01CF\u01D1\u01D3\u01D5\u01D7\u01D9\u01DB\u01DE\u01E0\u01E2\u01E4\u01E6\u01E8\u01EA\u01EC\u01EE\u01F1\u01F4\u01F6-\u01F8\u01FA\u01FC\u01FE\u0200\u0202\u0204\u0206\u0208\u020A\u020C\u020E\u0210\u0212\u0214\u0216\u0218\u021A\u021C\u021E\u0220\u0222\u0224\u0226\u0228\u022A\u022C\u022E\u0230\u0232\u023A\u023B\u023D\u023E\u0241\u0243-\u0246\u0248\u024A\u024C\u024E\u0370\u0372\u0376\u037F\u0386\u0388-\u038A\u038C\u038E\u038F\u0391-\u03A1\u03A3-\u03AB\u03CF\u03D2-\u03D4\u03D8\u03DA\u03DC\u03DE\u03E0\u03E2\u03E4\u03E6\u03E8\u03EA\u03EC\u03EE\u03F4\u03F7\u03F9\u03FA\u03FD-\u042F\u0460\u0462\u0464\u0466\u0468\u046A\u046C\u046E\u0470\u0472\u0474\u0476\u0478\u047A\u047C\u047E\u0480\u048A\u048C\u048E\u0490\u0492\u0494\u0496\u0498\u049A\u049C\u049E\u04A0\u04A2\u04A4\u04A6\u04A8\u04AA\u04AC\u04AE\u04B0\u04B2\u04B4\u04B6\u04B8\u04BA\u04BC\u04BE\u04C0\u04C1\u04C3\u04C5\u04C7\u04C9\u04CB\u04CD\u04D0\u04D2\u04D4\u04D6\u04D8\u04DA\u04DC\u04DE\u04E0\u04E2\u04E4\u04E6\u04E8\u04EA\u04EC\u04EE\u04F0\u04F2\u04F4\u04F6\u04F8\u04FA\u04FC\u04FE\u0500\u0502\u0504\u0506\u0508\u050A\u050C\u050E\u0510\u0512\u0514\u0516\u0518\u051A\u051C\u051E\u0520\u0522\u0524\u0526\u0528\u052A\u052C\u052E\u0531-\u0556\u10A0-\u10C5\u10C7\u10CD\u13A0-\u13F5\u1E00\u1E02\u1E04\u1E06\u1E08\u1E0A\u1E0C\u1E0E\u1E10\u1E12\u1E14\u1E16\u1E18\u1E1A\u1E1C\u1E1E\u1E20\u1E22\u1E24\u1E26\u1E28\u1E2A\u1E2C\u1E2E\u1E30\u1E32\u1E34\u1E36\u1E38\u1E3A\u1E3C\u1E3E\u1E40\u1E42\u1E44\u1E46\u1E48\u1E4A\u1E4C\u1E4E\u1E50\u1E52\u1E54\u1E56\u1E58\u1E5A\u1E5C\u1E5E\u1E60\u1E62\u1E64\u1E66\u1E68\u1E6A\u1E6C\u1E6E\u1E70\u1E72\u1E74\u1E76\u1E78\u1E7A\u1E7C\u1E7E\u1E80\u1E82\u1E84\u1E86\u1E88\u1E8A\u1E8C\u1E8E\u1E90\u1E92\u1E94\u1E9E\u1EA0\u1EA2\u1EA4\u1EA6\u1EA8\u1EAA\u1EAC\u1EAE\u1EB0\u1EB2\u1EB4\u1EB6\u1EB8\u1EBA\u1EBC\u1EBE\u1EC0\u1EC2\u1EC4\u1EC6\u1EC8\u1ECA\u1ECC\u1ECE\u1ED0\u1ED2\u1ED4\u1ED6\u1ED8\u1EDA\u1EDC\u1EDE\u1EE0\u1EE2\u1EE4\u1EE6\u1EE8\u1EEA\u1EEC\u1EEE\u1EF0\u1EF2\u1EF4\u1EF6\u1EF8\u1EFA\u1EFC\u1EFE\u1F08-\u1F0F\u1F18-\u1F1D\u1F28-\u1F2F\u1F38-\u1F3F\u1F48-\u1F4D\u1F59\u1F5B\u1F5D\u1F5F\u1F68-\u1F6F\u1FB8-\u1FBB\u1FC8-\u1FCB\u1FD8-\u1FDB\u1FE8-\u1FEC\u1FF8-\u1FFB\u2102\u2107\u210B-\u210D\u2110-\u2112\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u2130-\u2133\u213E\u213F\u2145\u2183\u2C00-\u2C2E\u2C60\u2C62-\u2C64\u2C67\u2C69\u2C6B\u2C6D-\u2C70\u2C72\u2C75\u2C7E-\u2C80\u2C82\u2C84\u2C86\u2C88\u2C8A\u2C8C\u2C8E\u2C90\u2C92\u2C94\u2C96\u2C98\u2C9A\u2C9C\u2C9E\u2CA0\u2CA2\u2CA4\u2CA6\u2CA8\u2CAA\u2CAC\u2CAE\u2CB0\u2CB2\u2CB4\u2CB6\u2CB8\u2CBA\u2CBC\u2CBE\u2CC0\u2CC2\u2CC4\u2CC6\u2CC8\u2CCA\u2CCC\u2CCE\u2CD0\u2CD2\u2CD4\u2CD6\u2CD8\u2CDA\u2CDC\u2CDE\u2CE0\u2CE2\u2CEB\u2CED\u2CF2\uA640\uA642\uA644\uA646\uA648\uA64A\uA64C\uA64E\uA650\uA652\uA654\uA656\uA658\uA65A\uA65C\uA65E\uA660\uA662\uA664\uA666\uA668\uA66A\uA66C\uA680\uA682\uA684\uA686\uA688\uA68A\uA68C\uA68E\uA690\uA692\uA694\uA696\uA698\uA69A\uA722\uA724\uA726\uA728\uA72A\uA72C\uA72E\uA732\uA734\uA736\uA738\uA73A\uA73C\uA73E\uA740\uA742\uA744\uA746\uA748\uA74A\uA74C\uA74E\uA750\uA752\uA754\uA756\uA758\uA75A\uA75C\uA75E\uA760\uA762\uA764\uA766\uA768\uA76A\uA76C\uA76E\uA779\uA77B\uA77D\uA77E\uA780\uA782\uA784\uA786\uA78B\uA78D\uA790\uA792\uA796\uA798\uA79A\uA79C\uA79E\uA7A0\uA7A2\uA7A4\uA7A6\uA7A8\uA7AA-\uA7AE\uA7B0-\uA7B4\uA7B6\uFF21-\uFF3A]|\uD801[\uDC00-\uDC27\uDCB0-\uDCD3]|\uD803[\uDC80-\uDCB2]|\uD806[\uDCA0-\uDCBF]|\uD835[\uDC00-\uDC19\uDC34-\uDC4D\uDC68-\uDC81\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB5\uDCD0-\uDCE9\uDD04\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD38\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD6C-\uDD85\uDDA0-\uDDB9\uDDD4-\uDDED\uDE08-\uDE21\uDE3C-\uDE55\uDE70-\uDE89\uDEA8-\uDEC0\uDEE2-\uDEFA\uDF1C-\uDF34\uDF56-\uDF6E\uDF90-\uDFA8\uDFCA]|\uD83A[\uDD00-\uDD21])([a-z\u00C0-\u017F])+$

This range above supports ALL uppercase characters in the unicode class set.

Then for the Nickname you can use:

^([\w\s\u00C0-\u017F]{1,13})$

^ asserts position at start of a line
1st Capturing Group ([\w\u00C0-\u017F]{1,13})
Match a single character present in the list below [\w\u00C0-\u017F]{1,13}
{1,13} Quantifier Matches between 1 and 13 times, as many times as possible,
giving back as needed (greedy)
\w matches any word character (equal to [a-zA-Z0-9_])
\u00C0-\u017F a single character in the range between (index 192) and (index 383) (case sensitive)
$ asserts position at the end of a line

[Vue.js] The json data can't into Vue router Subscribe to RSS

Below is the JSON data that I used for practice API call. But when I try to load the JSON data, I couldn’t able to do it.

I don’t know why I use data(){…..

the data.json can’t show in web, but in console, data.json has be read
like this img:

https://i.imgur.com/Hn41K92.png

my data.json is:

{
“contents”: [
{
“content”: “456”,
“id”: 2
}
]
}

//This is my Vue.js

let List={
template:
`<div>
<p>
<input type=”text” v-model.trim=”input”>
<a href=”javascript:;” v-on:click=”createHandler”>Create</a>
</p>
<ol>
<li v-for=”(item,index) in contents” :key=”item.id”>
{ item.content }
</li>
</ol>
</div>`,
data() {
return {
input: ‘’,
contents:[]
};
}
let router= new VueRouter({
routes:[
{
path:’/‘,
name:’list’,
component:List
},
{
path:’/update/:id’,
name:’update’,
component:Edit
},
{
path:’*‘,
redirect:’/‘
}
]

})
new Vue({
el: “#app”,
router:router,
mounted() {
axios.get(‘http://localhost:3000/contents').then((res) => {
console.log(res.data);
this.contents = res.data;
})
}
})
<!– This is my HTML –>

<div id=”app”>
<router-view></router-view>
</div>

Solution :

here is a Jsfiddle

first you need to declare a vue.js component …. because the one you have let list = {…} is not a component and the router doesn’t recognize it ,
also the vue.js instance data is not the component data … you need to pass the array as a prop …. here is how you do it :

var list = Vue.component(‘list’,{
template:
`<div>
<p>
<input type=”text” v-model.trim=”input”>
<a href=”javascript:;” v-on:click=”createHandler”>Create</a>
</p>
<ol>
<li v-for=”(item,index) in contents” :key=”item.id”>
{ item.content }
</li>
</ol>
</div>`,
props : [‘contents’],
data() {
return {
input: ‘’,
}
}
})

let router= new VueRouter({
routes:[
{
path:’/‘,
name:’list’,
component:list
},
{
path:’/update/:id’,
name:’update’,
component:Edit
},
{
path:’*‘,
redirect:’/‘
}
]
})

new Vue({
el: “#app”,
router:router,
data(){
return {
contents : []
}
},
mounted() {
axios.get(‘http://localhost:3000/contents').then((res) => {
this.contents = res.data
})
}
})
<div id=”app”>
<router-view :contents = “contents”></router-view>
</div>