link548 link549 link550 link551 link552 link553 link554 link555 link556 link557 link558 link559 link560 link561 link562 link563 link564 link565 link566 link567 link568 link569 link570 link571 link572 link573 link574 link575 link576 link577 link578 link579 link580 link581 link582 link583 link584 link585 link586 link587 link588 link589 link590 link591 link592 link593 link594 link595 link596 link597 link598 link599 link600 link601 link602 link603 link604 link605 link606 link607 link608 link609 link610 link611 link612 link613 link614 link615 link616 link617 link618 link619 link620 link621 link622 link623 link624 link625 link626 link627 link628 link629 link630 link631 link632 link633 link634 link635 link636 link637 link638 link639 link640 link641 link642 link643 link644 link645 link646 link647 link648 link649 link650 link651 link652 link653 link654 link655 link656 link657 link658 link659 link660 link661 link662 link663 link664 link665 link666 link667 link668 link669 link670 link671 link672 link673 link674 link675 link676 link677 link678 link679 link680 link681 link682 link683 link684

[Vue.js] How to Convert Codepen to Vue.js?

I’m having trouble moving this pen to Vue.js

This is what my code looks like for The vue.js app - I understand where the HTML, and CSS should go. Should I add the Javascript to the individual component, or add it to the App.vue.js file?

What to do is test this code in a view I can route to.

This is the Javascript from the pen:

var app = new Vue({
el: ‘#app’,
mounted() {
let vm = this
axios
.get(
https://sheets.googleapis.com/v4/spreadsheets/15qFEW97T-9Im9dx5G4KJqRorPDy74wwAvqaQm5Phz4w/values/A2%3AC12?key=AIzaSyBP4OwJmDCdX0rdOdgIa4q79g0XrMGcOSk'
)
.then(function (response) {
let specials = response.data.values
for (let index = 0; index < specials.length; index++) {
const element = specials[index]
let mitem = {
name: element[0],
description: element[1],
price: element[2]
}
if (vm.isEven(index)) {
vm.menuItems_L = vm.menuItems_L.concat(mitem)
} else {
vm.menuItems_R = vm.menuItems_R.concat(mitem)
}
}
console.log(response)
})
},
data: {
menuItems_L: [],
menuItems_R: [],
menuStyle: {
background: ‘#ffe6d1’,
color: ‘#000’
},
dotStyle: {
backgroundImage: ‘radial-gradient(‘ + this.color + ‘ 1px, transparent 0px)’
}
},
computed: {},
methods: {
isEven: function (n) {
return n % 2 == 0
}
}
});

This is what my code looks like in the component (with changes from research / guessing), the HTML is in tags above it:

<script>
import axios from ‘axios’;

export default {

mounted() {
let vm = this
Vue.axios.get(
https://sheets.googleapis.com/v4/spreadsheets/15qFEW97T-9Im9dx5G4KJqRorPDy74wwAvqaQm5Phz4w/values/A2%3AC12?key=AIzaSyBP4OwJmDCdX0rdOdgIa4q79g0XrMGcOSk'
)
.then(function (response) {
let specials = response.data.values
for (let index = 0; index < specials.length; index++) {
const element = specials[index]
let mitem = {
name: element[0],
description: element[1],
price: element[2]
}
if (vm.isEven(index)) {
vm.menuItems_L = vm.menuItems_L.concat(mitem)
} else {
vm.menuItems_R = vm.menuItems_R.concat(mitem)
}
}
console.log(response)
})
},

data: {
menuItems_L: [],
menuItems_R: [],
menuStyle: {
background: ‘#ffe6d1’,
color: ‘#000’
},
dotStyle: {
backgroundImage: ‘radial-gradient(#000, 1px, transparent 0px)’
}
},

computed: {},

methods: {
isEven: function (n) {
return n % 2 == 0
},

setColor: function (c) {
c = menuStyle.color
let colorStyle = ‘radial-gradient(‘ + c + ‘ 1px, transparent 0px)’
return colorStyle
}
}
}
</script>

Solution :

You just need to remove the link on the first of the HTML templets, and make the <div id=’#app’> is the root for the whole page as mentioned on vue.js Docs

vue.js will show an error,
explaining that every component must have a single root element. You
can fix this error by wrapping the template in a parent element

Also change data:{} to function data(){return{} … because As mentioned on vue.js Docs, that Data have to be a function

a components data option must be a function, so that each instance
can maintain an independent copy of the returned data object:

import axios from ‘axios’;

export default {
el: ‘#app’,
data() {
return {
menuItems_L: [],
menuItems_R: [],
menuStyle: {
background: ‘#ffe6d1’,
color: ‘#000’
},
dotStyle: {
backgroundImage: ‘radial-gradient(‘ + this.color + ‘ 1px, transparent 0px)’
}
}
},
mounted() {
let vm = this
axios
.get(
https://sheets.googleapis.com/v4/spreadsheets/15qFEW97T-9Im9dx5G4KJqRorPDy74wwAvqaQm5Phz4w/values/A2%3AC12?key=AIzaSyBP4OwJmDCdX0rdOdgIa4q79g0XrMGcOSk'
)
.then(function (response) {
let specials = response.data.values
for (let index = 0; index < specials.length; index++) {
const element = specials[index]
let mitem = {
name: element[0],
description: element[1],
price: element[2]
}
if (vm.isEven(index)) {
vm.menuItems_L = vm.menuItems_L.concat(mitem)
} else {
vm.menuItems_R = vm.menuItems_R.concat(mitem)
}
}
console.log(response)
})
},
methods: {
isEven: function (n) {
return n % 2 == 0
}
}
}

<template>
<div id=”app”>
<section id=”specialssection” class=”specials-container” v-if=”menuItems_L” :style=”menuStyle”>
<div id=”special_component” :style=”menuStyle”>
<h1>Daily Specials</h1>
<div class=”specials-table-container”>
<table>
<tbody v-for=”item in menuItems_L” :key=”`specialmenu-${item.name}`“>
<tr class=”nameandprice”>
<td :style=”dotStyle”>
<span :style=”menuStyle”>{item.name}</span>
</td>
<td :style=”dotStyle”>
<span :style=”menuStyle”>${item.price}</span>
</td>
</tr>
<tr class=”description”>
<td colspan=”2”>{item.description}</td>
</tr>
</tbody>
</table>
<table>
<tbody v-for=”item in menuItems_R” :key=”`specialmenu-${item.name}`“>
<tr class=”nameandprice”>
<td :style=”dotStyle”>
<span :style=”menuStyle”>{item.name}</span>
</td>
<td :style=”dotStyle”>
<span :style=”menuStyle”>${item.price}</span>
</td>
</tr>
<tr class=”description”>
<td colspan=”2”>{item.description}</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
</div>
</template>

[Vue.js] Why is push page not working in VueJS onsen app using both splitter and push page navigator?

I’m trying to create an onsen app using vuejs but I’m stuck on push page navigator where only splitter is working, push page is not working. below is what I’ve tried. (I’m using vue.js cli)

files structure

src
- components
- Home.vue
- Main.vue
- Swipenav.vue
- Toolbar.vue

- App.vue
- main.js

Swipenav.vue

<template>
<v-ons-navigator swipeable :page-stack=”pageStack” @push-page=”pageStack.push($event)”>
<v-ons-page>
<v-ons-splitter>
<v-ons-splitter-side swipeable
width=”150px” collapse=”” side=”left”
:open.sync=”openSide”
\>
<v-ons-page>
<v-ons-list>
<v-ons-list-item v-for=”page in pages” :key=”page.id” tappable modifier=”chevron” @click=”currentPage = page.name; openSide = false”
\>
<div class=”center”>{ page.title }</div>
</v-ons-list-item>
</v-ons-list>
</v-ons-page>
</v-ons-splitter-side>

<v-ons-splitter-content>
<component :is=”currentPage” :toggle-menu=”() => openSide = !openSide”></component>
</v-ons-splitter-content>

</v-ons-splitter>
</v-ons-page>
</v-ons-navigator>
</template>

<script>
import main_tpl from ‘./Main.vue’
import home_tpl from ‘./Home.vue’
export default {
name : “swipenav”,
data() {
return {
pageStack: [main_tpl],
pages : [
{ name : ‘main_tpl’, title : ‘Main’ },
{ name : ‘home_tpl’, title : ‘Home’ },
],
currentPage : ‘home_tpl’,
openSide : false
};
},
components : {
home_tpl : home_tpl,
main_tpl : main_tpl
}
}
</script>

Main.vue

<template>
<v-ons-page>
<v-ons-toolbar>
<div class=”center”>Main</div>
</v-ons-toolbar>
<p style=”text-align: center”>
main page
<v-ons-button @click=”push_signin”>Push signin</v-ons-button>
</p>
</v-ons-page>
</template>

<script>
import signin_tpl from ‘./Signin.vue’;
export default {
name : ‘mainpage_comp’,
methods : {
push_signin(){
console.log(‘working’);
this.$emit(‘push-page’,signin_tpl)
}
}
}
</script>

I can confirm this push_signin() method is working but seems this.$emit(‘push-page’,signin_tpl) is not working. Any help, ideas please?

Solution :

the vue.js custom event system that you are trying to use,

is meant only for passing data from a child component up to its parent.

it wont work for siblings components, like yours.
you can use a global event bus, so you can pass events from everywhere to everywhere.

[Vue.js] Vue.js need to submit an answer and display the answer

On click submit_answer button show the correct error_block or incorrect error_block along with answer_block based on the user response.

<div v-show=”index === questionIndex”>
<h3>{index + 1}) {question.text}</h3>
<div class=”option_div” v-for=”(response,resp) in question.responses”>
<input type=”radio” v-bind:name=”index” v-bind:value=”response.correct” v-model=”userResponses[index]“/>
<label> {response.text} </label>
</div>
<!–<div class=”frm_grp”>
<a href=”” v-on:click.prevent=”submit” class=”submit_answer” >Submit</a>
</div>–>
<div class=”error_block hide alert alert-success”>
<p>Correct</p>
</div>
<div class=”error_block hide alert alert-danger”>
<p>Incorrect</p>
</div>
<div class=”answer_block “>
<h4>Answer Details</h4>
<p>Option {correctanswer(question.responses)} is the correct answer</p>
</div>

This function is not working it says response is undefined.

correctanswer: function (responses) {
var mapping = [“A”, “B”, “C” , “D”, “E”];
var $i = 0;

for(var response in responses){
console.log(response.correct);
if(response.correct) {
break;
}
$i++;
}

return mapping[$i+1];
},

jsfiddle Link

Solution :

when unable to make comments, and therefore would only give my suggestions here. First of, due to client or user mistrust, I bet you are using some kind of backend api for the marking. That is, you send api request each time the submit button is clicked. So now here is where you would integrate with what you are trying to achieve, upon hitting the backend, the json response will have the questions plus the correctly selected answers and now in the loop you can show the div’s ( correct and incorrect ) based on the correctness of the answer provided.

Steps:

Show the questions
Mark the questions (backend)
Show the questions now with answer status (wrong or correct)
Show the correct or error block based on the answer status

[Vue.js] How do I import a mixin from an embeded folder in components?

This is probably really easy, but i dont know what it’s called so i dont know what to google for.

My filestructure is like this:

src
components
| SomeComponentGroup
| Button1.vue
|
|
mixins
| MyMixin.js

How do i import MyMixin from Button1? import MyMixin from ‘../mixins/MyMixins.js’ doesnt work

Solution :

Am I missing something? You just need to go one more up like import MyMixin from ‘../../mixins/MyMixins.js’

Solution 2:

Yeah it was really easy. @/mixins/MyMixins.js; was the solution

[Vue.js] Webpack config for publishing vue component into an npm package

here’s my main js code for the component

import ‘./sass/main.scss’
import Vlider from ‘./Vlider.vue’

function install(Vue) {
if (install.installed) return;
install.installed = true;
Vue.component(‘vlider’, Vlider);
}

const plugin = {
install,
};

let Globalvue.js = null;
if (typeof window !== ‘undefined’) {
Globalvue.js = window.Vue;
} else if (typeof global !== ‘undefined’) {
Globalvue.js = global.Vue;
}
if (GlobalVue) {
GlobalVue.use(plugin);
}

Vlider.install = install;

export default Vlider

can anyone help me with the webpack config? I need to output 4 files from this index.js

dist/vlider.umd.js
dist/vlider.esm.js
dist/vlider.min.js
vlider.css

so that it can support multiple entry points in package.json

“main”: “dist/vlider.umd.js”,
“module”: “dist/vlider.esm.js”,
“unpkg”: “dist/vlider.min.js”,
“browser”: “src/vlider.vue”

this is my first time dealing with webpack so the help will be greatly appreciated

Solution :

Webpack does not support esmodule as the output target. You can create commonjs module or umd/iife module.

If you need ESModule as a target then consider using Rollup.js. In general, you should use Rollup when you need to bundle library and Webpack for application bundling. (Note: Rollup is great but TypeScript + .vue.js files + Class-based vue.js component syntax does not work.)

Also, irrespective of Webpack or Rollup, you can use array-based/multiple-targets export. Refer following links for more details:

Webpack: https://webpack.js.org/concepts/targets/#multiple-targets

Rollup: https://rollupjs.org/guide/en#configuration-files

[Vue.js] Vuejs / Laravel route is not working in the production

We have a vue.js SPA for the front-end and laravel RESTapi for the backend.

In my SPA there is an unprotected route called return

{
path: ‘/return’,
component: returnPage
},

When I run the project on my local machine I can easily access this route
like this

http://localhost:8080/return

But after I build the project and host it in the server and when I try to insert this

http://emaster.lk/return

It gives me an error.

Why could this happen?
Any idea?

Solution :

Still can’t give comments yet, so this is basically not an answer but a suggestion:

This could be a server misconfiguration, there is interacted with apache server that much but normally I will use nginx, you can checkout a sample configuration here with nginx and laravel laravel-nginx-ss-setup

And here is just a snapshot from the post:

server {
listen 80 default_server;

server_name domain_name.com www.domain\_name.com;

access_log /var//www/html/<name-of-your-project>/logs/access.log;
error_log /var/www/html/<name-of-your-project>/logs/error.log;

root /var/www/html/<name-of-your-project>/public;
index index.php index.html;

# serve static files directly
location ~* \.(jpg|jpeg|gif|css|png|js|ico|html)$ {
access_log off;
expires max;
log_not_found off;
}

# removes trailing slashes (prevents SEO duplicate content issues)
if (!-d $request_filename)
{
rewrite ^/(.+)/$ /$1 permanent;
}

# enforce NO www
if ($host ~* ^www\.(.*))
{
set $host_without_www $1;
rewrite ^/(.*)$ $scheme://$host_without_www/$1 permanent;
}

# unless the request is for a valid file (image, js, css, etc.), send to bootstrap
if (!-e $request_filename)
{
rewrite ^/(.*)$ /index.php?/$1 last;
break;
}

location / {
try_files $uri $uri/ /index.php?$query_string;
}

location ~* \.php$ {
try_files $uri = 404;
fastcgi_split_path_info ^(.+\.php)(/.+)$;
fastcgi_pass unix:/var/run/php/php7.2-fpm.sock; # may also be: 127.0.0.1:9000;
fastcgi_index index.php;
fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
include fastcgi_params;
}

location ~ /\.ht {
deny all;
}

}

[Vue.js] Dynamically replaced text string with Vue component

I’m attempting to make a page which will load a text string (https://pastebin.com/Mp9sKy1A) into a page and then replace any instance of –FML-[componentName] with the appropriate component.

So for example –FML-[NoteBlock] would be automatically replaced with the NoteBlock component.

This is what there is so far:

pureContent () {
const c = this.content.replaced
const re = new RegExp(`<p>–FML-\\[(\\w+)\\]</p>`, ‘g’)
return c.replace(re, ($0, $1) => `<component v-bind:is=”${$1.toLowerCase()}”></component>`)
}

The output will then be placed into the following template:

<template>
<div>
<site-header></site-header>
<div class=”wrapper”>
<side-bar></side-bar>
<main class=”container” v-html=”pureContent()” />
</div>
</div>
</template>

It actually sort of works. However the component part isn’t being pulled in as an actual component, rather a <component> HTML tag, which obviously isn’t the desired result. Is there a way to make it work as desired?

Here is the full SFC file if anyone is interested: https://pastebin.com/yb4CJ1Ew

This is the output when currently getting:

<main data-v-86dcc3c4=”” class=”container”>
<h1 id=”creating-new-contexts”>Creating new contexts</h1>
<h2 id=”section-title”>Section Title</h2>
<h3 id=”section-subtitle-that-contains-additional-information”>
Section subtitle that contains additional information
</h3>
<p>
Cillum ipsum ad veniam elit non. Sunt ea ut quis qui dolore id voluptate
magna. Ex non commodo reprehenderit ipsum irure. Ad excepteur nulla ullamco
et deserunt magna et sint reprehenderit sint esse commodo. Tempor duis anim
nisi commodo incididunt ut ex et sunt laborum excepteur ea culpa laborum.
</p>
<component v-bind:is=”noteblock”></component>
<p>
Officia esse Lorem ad duis dolore nostrud ex elit aliqua incididunt sint ad
ex. Eiusmod do in ad aute nulla eiusmod tempor Lorem non. Qui sunt voluptate
laborum mollit elit adipisicing minim dolore voluptate veniam incididunt
proident ullamco. Ipsum est cupidatat occaecat pariatur ut aute.
</p>
<component v-bind:is=”codeexample”></component>
<component v-bind:is=”propstable”></component>
</main>

The <component> tags should be actual vue.js components

Solution :

You can’t do it with v-html:

Updates the elements innerHTML. Note that the contents are inserted
as plain HTML - they will not be compiled as vue.js templates. If you
find yourself trying to compose templates using v-html, try to rethink
the solution by using components instead.

You’re already using dynamic components, you just need One Component To Rule Them All (and in the document bind them).

You could, in fact, use non-dynamic components internally, if you wanted to define the noteblock, et. al. as components rather than data items, but you definitely need the container to be a dynamic component, as that’s the only way you can turn text data into Vue-managed DOM.

new Vue({
el: ‘#app’,
data: {
preContent: “<h1 id=\“creating-new-contexts\“>Creating new contexts</h1>\n<h2 id=\“section-title\“>Section Title</h2>\n<h3 id=\“section-subtitle-that-contains-additional-information\“>Section subtitle that contains additional information</h3>\n<p>Cillum ipsum ad veniam elit non. Sunt ea ut quis qui dolore id voluptate magna. Ex non commodo reprehenderit ipsum irure. Ad excepteur nulla ullamco et deserunt magna et sint reprehenderit sint esse commodo. Tempor duis anim nisi commodo incididunt ut ex et sunt laborum excepteur ea culpa laborum.</p>\n<p>–FML-[NoteBlock]</p>\n<p>Officia esse Lorem ad duis dolore nostrud ex elit aliqua incididunt sint ad ex. Eiusmod do in ad aute nulla eiusmod tempor Lorem non. Qui sunt voluptate laborum mollit elit adipisicing minim dolore voluptate veniam incididunt proident ullamco. Ipsum est cupidatat occaecat pariatur ut aute.</p>\n<p>–FML-[CodeExample]</p>\n<p>–FML-[PropsTable]</p>\n”
},
computed: {
pureContent() {
const c = this.preContent;
const re = new RegExp(`<p>–FML-\\[(\\w+)\\]</p>`, ‘g’);

return c.replace(re, ($0, $1) => `<component v-bind:is=”${$1.toLowerCase()}”></component>`);
},
postProcessSpec() {
return {
template: `<div>${this.pureContent}</div>`,
data() {
return {
codeexample: {
template: ‘<pre>This is the CODEEXAMPLE component</pre>’
},
noteblock: {
template: ‘<div>This is the NOTEBLOCK component</div>’
},
propstable: {
template: ‘<table border=1><th>PROPS TABLE!</th></table>’
}
}
},
components: {}
};
}
}
});
<script src=”https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id=”app”>
<component :is=”postProcessSpec”></component>
</div>

[Vue.js] Axios request giving getter setter methods instead of data queried

I’m working with Laravel and vue.js to make a single page web application. I’ve used vue.js before to get the data from a database using a controller with no problem, but for some reason I’m now only getting a seemingly infinitely nested JS object that has getter and setter methods stored in each parent object instead of the data I queried. I’ve seen other people with similar issues, but the solutions that worked for them didn’t work for me. For example, some people used JSON.parse(JSON.stringify(response.data)); to get just the raw data, but this doesn’t work when I attempt to store it in this.actions. Here is my index method in my ActionLogController

public function index($url)
{

$companyName = explode(“/“, $url);

if(Auth::check())
{
$company = Company::where(‘name’, ‘=’, strtolower($companyName[count($companyName) - 1]))->first();

// If sortby not empty
$sortby = “created_at”;

//assume desc (most recent)
$sortdirection = ‘desc’;

if(request()->has(‘sortdirection’) && request()->sortdirection == ‘asc’)
{
$sortdirection = ‘asc’;
}

// if sortby is set
if(request()->has(‘sortby’))
{
$sortby = request()->sortby;

switch($sortby)
{
case “date”:
$sortby = “string_date”;
break;
case “company”:
$sortby = “company_name”;
break;
case “name”:
// do nothing
break;
case “communication-type”:
$sortby = “communication_type”;
break;
case “contact”:
// do nothing
break;
case “subject”:
$sortby = “status”;
break;
case “assigned-to”:
$sortby = “assigned_to”;
break;
case “action”:
$sortby = “action_item”;
break;
case “assigned-to”:
$sortby = “assigned_to”;
break;
default:
$sortby = ‘created_at’;
break;
}
}
}

if($sortdirection == ‘asc’) {
return Auth::user()->actionLogs
->where(‘activity_key’, ‘=’, ‘1,’ . $company->id)
->sortBy($sortby);
}

return Auth::user()->actionLogs
->where(‘activity_key’, ‘=’, ‘1,’ . $company->id)
->sortByDesc($sortby);

}

This is my vue.js component to get the data from the controller. I know the template code works, because it worked fine when I sent it dummy data before pulling the data from the controller.

<style scoped>
.action-link {
cursor: pointer;
}

.m-b-none {
margin-bottom: 0;
}
</style>

<template>
<div class=”table-responsive”>
<table class=”table table-striped table-sm”>
<thead>
<tr>
<th><a id=”sortby-date” class=”action-nav” href=”?sortby=date&sortdirection=desc”>Date</a></th>
<th><a id=”sortby-company” class=”action-nav” href=”?sortby=company&sortdirection=desc”>Company</a></th>
<th><a id=”sortby-name” class=”action-nav” href=”?sortby=name&sortdirection=desc”>Name</a></th>
<th><a id=”sortby-communication-type” class=”action-nav” href=”?sortby=communication-type&sortdirection=desc”>Communication Type</a></th>
<th><a id=”sortby-contact” class=”action-nav” href=”?sortby=contact&sortdirection=desc”>Contact</a></th>
<th><a id=”sortby-subject” class=”action-nav” href=”?sortby=subject&sortdirection=desc”>Subject</a></th>
<th><a id=”sortby-action” class=”action-nav” href=”?sortby=action&sortdirection=desc”>Comment/Action Item</a></th>
<th>Archive</th>
<!– check if admin?? –>
<th><a id=”sortby-assigned-to” class=”action-nav” href=”?sortby=date&sortdirection=desc”>Assigned To</a></th>
<!– /check if admin?? –>
</tr>
</thead>
<tbody v-if=”actions.length > 0”>
<tr v-for=”action in actions”>
<td>
{ action.string_date }
</td>
<td>
{ action.company_name }
</td>
<td>
{ action.name }
</td>
<td>
{ action.communication_type }
</td>
<td>
{ action.contact }
</td>
<td>
{ action.status }
</td>
<td>
{ action.action_item }
</td>
<td>
<input type=”checkbox” :id=”‘archive-‘ + action.id” class=”archive” :name=”‘archive-‘ + action.id”>
</td>
<td :id=”‘record-‘ + action.id” class=”assigned-to”>
{ action.assigned_to }
</td>
</tr>
</tbody>
</table>
<p id=”add-action” style=”text-align: center;”>
<button id=”action-log-add” class=”btn btn-sm btn-primary edit”>Add Item</button>
<button id=”action-log-edit” class=”btn btn-sm btn-danger edit”>Edit Items</button>
</p>
</div>
</template>

<script>
export default {
data() {
return {
actions: []
}
},
methods: {
getActionLogs(location) {

var company = location.split(“/“);
company = company[company.length - 1];

axios.get(‘/action-log/‘ + company)
.then(response => {

this.actions = response.data;
console.log(this.actions);

})
.catch(error => {
console.log(‘error! ‘ + error);
});
}
},
mounted() {
this.getActionLogs(window.location.href);
}
}
</script>

This is the output I get in the browser console

{}

1: Getter & Setter

2: Getter & Setter

3: Getter & Setter

4: Getter & Setter

5: Getter & Setter

6: Getter & Setter

7: Getter & Setter

8: Getter & Setter

9: Getter & Setter

10: Getter & Setter

__ob__: Object { value: {}, dep: {}, vmCount: 0 }

<prototype>: Object { }

I was expecting to see the normal array of data that gets returned, but this is what shows up instead and then won’t update the component with the data. I’m new to Vue, so maybe there’s something really easy I missing, but I can’t seem to figure this out.

Solution :

Writing up my comments above as a sort of canonical answer to this as it keeps coming up…

What you’re looking at is how vue.js proxies the data to make it reactive. This is because you’re using console.log() on a vue.js instance data property.

When you assign values to a data property, it is transformed to an observable so vue.js can treat it reactively. I suggest you forget about trying to console.log() anything assigned to this and use the vue.js Devtools browser extension to inspect the components and their data if you’re having trouble rendering the response.

Please note, there is nothing wrong here.

[Vue.js] Missing a default scoped slot

when looking at the tutorials on vues page for adding tooltips. https://vuetifyjs.com/en/components/tooltips

It seems to work fine for an individual button.

However, it does not work within a v-item. I get a console message saying

‘[Vuetify] v-item is missing a default scopedSlot’

<v-item v-for=”foo in bars” :key=`${foo}`>
<v-tooltip>
<v-btn slot=”activator”>
<v-icon>some-icon</v-icon>
</v-btn>
<span>Some tooltip text</span>
</v-tooltip>
</v-item>

I’ve tried adding things to the above code like slot=”activator” to v-item and slot-scope=”activator” to the v-btn, but nothing seems to work quite right. Any suggestions as to what I’m doing wrong?

Running snippet added by @BoussadjraBrahim :

new Vue({
el: ‘#app’,
data() {
return {
bars: [‘a’, ‘b’, ‘c’]
}
}

})
<script src=”https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id=”app”>
<v-item-group>
<v-container grid-list-md>
<v-layout wrap>
<v-flex v-for=”(n,i) in bars” :key=”n” xs12 md4>
<v-item>
<v-tooltip>
<v-btn slot=”activator”>
<v-icon>home</v-icon>
</v-btn>
<span>Some tooltip text {n}</span>
</v-tooltip>
</v-item>
</v-flex>
</v-layout>
</v-container>
</v-item-group>

</div>

Solution :

After debugging the Code snippet i found the solution by adding slot-scope=”i” to the tooltip component like <v-tooltip slot-scope=”i” right> :

new Vue({
el: ‘#app’,
data() {
return {
bars: [‘home’, ‘event’, ‘info’]
}
}

})
<script src=”https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src=”https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel=”stylesheet” type=”text/css” href=”https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel=”stylesheet” type=”text/css” href=”https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id=”app” data-app>
<v-item-group >
<v-container grid-list-md>
<v-layout wrap>
<v-flex v-for=”(n,i) in bars” :key=”n” xs12 md4>
<v-item >
<v-tooltip slot-scope=”i” right>
<v-btn slot=”activator”>
<v-icon>{n}</v-icon>
</v-btn>
<span>{n}</span>
</v-tooltip>
</v-item>
</v-flex>
</v-layout>
</v-container>
</v-item-group>

</div>

[Vue.js] computed value in vue wont load to template when value exist

there is this issue i see first in vue. there is a computed property:

numOfStudentsPerSubject() {
let res = []

for (let subject of this.subjects) {
let key = subject.superSubject.trim()
res[key] = 0
for (let student of this.students) {
let studentSubject = student.subjects.find((x) => x.superSubjectName === key)
if (studentSubject) res[key]++
}
}
console.log(res)
return res
}

what is logged to the screen is the following result:

[Letters Recognition: 8, Listening - First Letter: 8, Listening - Letters: 0, Reading Comprehension - Sentences: 8, Reading Comprehension - Story: 8,]

but when i try to pint data to the screen like :<p>{numOfStudentsPerSubject}</p> it shows an empty array [] no matter what i do. anyone has any idea what can cause such an issue?

Solution :

First off you should be using an object for res and not an array. Arrays are indexed numerically and not by keys whereas objects are a collection of key value pairs.

Secondly, you are returning that array yet the vue.js template is expecting a string so is just calling toString on the array which defaults to [] as you don’t have any valid indexes to enumerate.

Switch to using an object and stringify that object (or use another method to convert it to a string) when you use it in the template.

const obj = {
‘example1’: 4,
‘example2’: 7
}

console.log(obj.toString())

console.log(JSON.stringify(obj))