link274 link275 link276 link277 link278 link279 link280 link281 link282 link283 link284 link285 link286 link287 link288 link289 link290 link291 link292 link293 link294 link295 link296 link297 link298 link299 link300 link301 link302 link303 link304 link305 link306 link307 link308 link309 link310 link311 link312 link313 link314 link315 link316 link317 link318 link319 link320 link321 link322 link323 link324 link325 link326 link327 link328 link329 link330 link331 link332 link333 link334 link335 link336 link337 link338 link339 link340 link341 link342 link343 link344 link345 link346 link347 link348 link349 link350 link351 link352 link353 link354 link355 link356 link357 link358 link359 link360 link361 link362 link363 link364 link365 link366 link367 link368 link369 link370 link371 link372 link373 link374 link375 link376 link377 link378 link379 link380 link381 link382 link383 link384 link385 link386 link387 link388 link389 link390 link391 link392 link393 link394 link395 link396 link397 link398 link399 link400 link401 link402 link403 link404 link405 link406 link407 link408 link409 link410

[Vue.js] Submenu didn't work and became a text only

there is a problem with submenu that I use from bootstrap. It became a text not a button to go another page, here is some code that I use

This is the latest vue.js and bootstrap 4, I’ve tried some tutorial’s but didn’t work

<div id=”sidebar-menu” class=”main_menu_side hidden-print main_menu”>
<div class=”menu_section”>
<ul class=”nav side-menu”>
<li><a><i class=”fa fa-edit”></i> Penjualan <span class=”fa fa-chevron-down”></span></a>
<ul class=”nav child_menu”>
<li><a>Pemesanan penjualan<span class=”fa fa-chevron-down”></span></a>
<ul class=”nav child_menu”>
<li><router-link to=”/pemesananPembelian”>P.O Penjualan</router-link></li>
<li><router-link to=”/konfirmasipemesananPenjualan”>P.O Konfirmasi</router-link></li>
<li><router-link to=”/dikirimpemesananPenjualan”>P.O Dikirim</router-link></li>
<li><router-link to=”/batalpemesananPenjualan”>P.O Batal</router-link></li>
</ul>
</li>

to make a sub menu to go another page, but the submenu didn’t work and become a textenter code here

Solution :

Check out the official doc:
https://router.vuejs.org/api/#router-link

<router-link tag=”li” to=”/foo”>
<a>/foo</a>
</router-link>

[Vue.js] V-for doesn't output props despite correctly passing in props

when trying to do a simple thing, which doesn’t work because I don’t know why.

So in parent, App.vue, component, there is

data() {
return {
servers: [
{
id: 1,
status: offline
},
{
id: 2,
status: offline
},
{
id: 3,
status: offline
},
{
id: 4,
status: offline
},
{
id: 5,
status: offline
}
]
};
}

when then passing it down to Servers.vue.js <servers :servers=”servers”></servers>.

In Servers.vue.js there is simple

<ul class=”list-group”>
<li class=”list-group-item” v-for=”i in servers”>Server</li>
</ul>

which does not output anything. Nothing at all, even though there is no error.

Yes, when doing props: [“servers”],.

Any idea what to do?

there is been trying to solve this for quite some time now…

edit: corrected that silly typo in code, still nothing

edit 2: here’s all of the code https://github.com/thenathurat/exercise-7

Solution :

I tested the GitHub repository, please modify the data() function of Servers.vue.js as follows:

data() {
return {
servers: [
{
id: 1,
status: ‘offline’
},
{
id: 2,
status: ‘offline’
},
{
id: 3,
status: ‘offline’
},
{
id: 4,
status: ‘offline’
},
{
id: 5,
status: ‘offline’
}
]
};
},

This will make the code work and here is a screenshot of the execution program:

[Vue.js] How to config Laravel Mix Vue.js source map to show real component code in debug mode

I use Laravel 5.4 with Vue.js 2.6. there is problem to see sourceMap of *.vue.js component file in console. I configure Laravel mix with this script:

let mix = require(‘laravel-mix’);

mix.webpackConfig({
devtool: ‘eval-source-map’
});

mix.js([
‘resources/assets/js/app.js’
], ‘public/js’)
.sourceMaps()
.version();

For example there is vue.js component like this:

<template>
<div class=”Example” @click=”add()”>
{ name }
</div>
</template>

<script>
export default {
data(){
return {
name: ‘John’
}
},
methods:{
add(){
console.log(‘example click’)
}
}
};
</script>

but when Laravel mix compile it, I see like this in source tab of chrome:

var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
“div”,
{
staticClass: “Example”,
on: {
click: function($event) {
return _vm.add()
}
}
},
[_vm._v(“\n “ + _vm._s(_vm.name) + “\n”)]
)
}
var staticRenderFns = []
render._withStripped = true
module.exports = { render: render, staticRenderFns: staticRenderFns }
if (module.hot) {
module.hot.accept()
if (module.hot.data) {
require(“vue-hot-reload-api”) .rerender(“data-v-650f2efa”, module.exports)
}
}

//////////////////
// WEBPACK FOOTER
// ./node_modules/vue-loader/lib/template-compiler?{“id”:”data-v-650f2efa”,”hasScoped”:false,”buble”:{“transforms”:{}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module id = ./node_modules/vue-loader/lib/template-compiler/index.js?{“id”:”data-v-650f2efa”,”hasScoped”:false,”buble”:{“transforms”:{}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./resources/assets/js/components/Example.vue
// module chunks = 0

What should I do to see real and pure Example vue.js component in source tab?

Solution :

Are you in the correct source location in the browser? You should look under webpack:// branch and not the top branch. If it help, my webpack mix has devtool: ‘source-map’ instead of devtool: ‘eval-source-map’ and I get the following - see screenshot below:

I can view and debug all the sources under webpack:// fine.

[Vue.js] How to upload file with vue component and laravel controller

to upload an image file with vue.js component to laravel controller. My problem happens when I click submit button name/description/address is saved but the image name not save

to save the image name to my database but if($request->hasFile(‘id_image’)) always return false

Can you tell me about syntax to solve this solution?

this is create.vue

<form action=”/listorgs” enctype=”multipart/form-data”>
<div class=”form-group”>
<label>name_org:</label>
<input type=”text” class=”form-control” v-model=”org.name_org”>
</div>
<div class=”form-group”>
<label>picture:</label>
<input
type=”file”
@change=”onFileChange”
name=”name_image”
id=”id_image”
class=”inputFile”
\>
</div>
<div class=”form-group”>
<label>description:</label>
<textarea
class=”form-control mb-2”
rows=”5”
v-model=”org.description”
\></textarea>
</div>
<div class=”form-group”>
<label>address:</label>
<input type=”text” class=”form-control” v-model=”org.address”>
</div>
<div class=”form-group”>
<button class=”btn btn-primary” v-on:click=”addNewOrg()”>Save</button>
</div>
</form>

in export default

data() {
return {
org: {
name_org: “”,
description: “”,
address: “”,
image: “”
}
};
},
methods: {
addNewOrg() {
axios
.post(“/api/listorgs”, this.org)
.then(response => {
console.log(response.data);
if (response.data.etat) {
this.org = {
name_org: response.data.etat.name_org,
description: response.data.etat.description,
address: response.data.etat.address,
picture: response.data.etat.image
};
}
})
.catch(error => {
console.log(“errors: “, error);
});
console.log(this.image);
},
onFileChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImage(files[0]);
},
createImage(file) {
let reader = new FileReader();
reader.onload = e => {
this.org.image = e.target.result;
};
reader.readAsDataURL(file);
}
}

This is my controller

$listorg=new ListOrg();
$listorg->name_org=$request->get(‘name_org’);
$listorg->description=$request->get(‘description’);
$listorg->address=$request->get(‘address’);
if($request->hasFile(‘name_image’)){
$listorg->picture= $request->image->store(‘images’);
}
$listorg->save();
return response()->json($listorg);

It say

Solution :

the javascript references an ‘image’ field and the field is named ‘id_image’?

Sorry, I can’t comment yet (score), but maybe try sticking to a convention of some kind?

Try just dumping & dying the full request in the controller method.

Might give you a good clue on what’s wrong.

Solution 2:

You’re confusing 3 different methods of FORM POST. Let me clarify:

If you want to use axios, change the form and remove action and enctype to prevent confusion that you’re doing an AJAX POST and not a regular FORM POST.
Determine if you’re trying to retrieve the file as base64 encoded or as binary. It look like you want to do a binary so get rid of that base64 redundant code. And bind the file input directly with v-model.
OK so now that we’re clear you want to do binary because the server-side code has this $request->hasFile(‘name_image’), you would need to submit it as FormData object.

So, the code would look like this:

<!– point #1, we made it clear that it is an AJAX submit
by handling the submit event. –>
<form @submit.prevent=”addNewOrg”>
<div class=”form-group”>
<label>name_org:</label>
<input type=”text” class=”form-control” v-model=”org.name_org”>
</div>
<div class=”form-group”>
<label>picture:</label>
<!– remove change event handling and bind
the file directly to the image property –>
<input
type=”file”
v-model=”org.image”
class=”inputFile”
\>
</div>
<div class=”form-group”>
<label>description:</label>
<textarea
class=”form-control mb-2”
rows=”5”
v-model=”org.description”
\></textarea>
</div>
<div class=”form-group”>
<label>address:</label>
<input type=”text” class=”form-control” v-model=”org.address”>
</div>
<div class=”form-group”>
<!– point #1, change the button type to submit button.
The form and submit button combination also has a
side-affect/benefit of auto-submit if user hit
the enter button on the form. –>
<button class=”btn btn-primary” type=”submit”>Save</button>
</div>
</form>

data() {
return {
org: {
name_org: “”,
description: “”,
address: “”,
image: null
}
};
},
methods: {
addNewOrg() {
// point #2, to do binary data upload
// you need to use FormData
var fd = new FormData();
for (var key in this.org) {
fd.append(key, this.org[key]);
}

axios
.post(“/api/listorgs”, fd)
.then(response => {
console.log(response.data);
if (response.data.etat) {
this.org = {
name_org: response.data.etat.name_org,
description: response.data.etat.description,
address: response.data.etat.address,
picture: response.data.etat.image
};
}
})
.catch(error => {
console.log(“errors: “, error);
});
console.log(this.image);
}

/* Since you’re doing binary submit, you don’t need
all that base64 image data url codes, unless you
want to do something else like preview image
canvas before upload or something
similar. */

And then the server-side code:

$listorg=new ListOrg();
$listorg->name_org=$request->get(‘name_org’);
$listorg->description=$request->get(‘description’);
$listorg->address=$request->get(‘address’);

/* you’re submitting it as image with ajax
not a regular form post so you don’t want
to use the name of the input. That’s why
I removed the input name in the html
above to avoid confusion */

if($request->hasFile(‘image’)){
$listorg->picture= $request->image->store(‘images’);
}
$listorg->save();
return response()->json($listorg);

Solution 3:

$listorg->picture.

If when right, the data returned from the controller does not have image property.
try console.log(this.picture);

[Vue.js] Vue js and VS code - no Intellisense for absolute file path

there is an app created using vue-cli 3 and when using Visual Studio as my IDE. there is installed Vetur extension. Unfortunately when when typing something like that

import Message from ‘@/components/Message’

VS code does not provide any Intellisense for resolving such an absolute file path. Maybe VS code does not understand that @ maps to ‘src’ folder in projects created using vue-cli. Does anybody know how to solve that problem?

I will be very grateful for any help.

Solution :

You ‘d be needing a jsconfig.json file for the Intellisense to kick in with webpack aliases. You can check the linked article.

https://medium.com/@justintulk/solve-module-import-aliasing-for-webpack-jest-and-vscode-74007ce4adc9

[Vue.js] How to import multiple components with the same name in a Vuejs project?

I’ve inherited a Vue.js project that, among other things, has this:

import Multiselect from ‘vue-multiselect’;

<multiselect :multiple=”true”
v-model=”selectedTags”
:options=”tagOptions”
label=”title”
track-by=”id”></multiselect>

Now, on the same page, we are also supposed to have a different multiselect object, imported from a different place, that looks like:

import Multiselect from ‘./../../../../../../vendor/devcompany/scripts/vue/components/form/multiselect.vue’;

<multiselect v-model=”selectedTeacherIds”
:sortable=”true”
:options=”computedTeacherOptions”>
<template slot=”selected-option-value” slot-scope=”{optionKey}”>
{teacherNames[optionKey]}
</template>

Each of these works well individually, but when supposed to somehow import both of them and use them both within the same component. Clearly this will not work without some sort of alteration to the code.

Is there some syntax to, perhaps, import as and thus change the name of one of the objects? Or do I need to go into the source code of one of them and change the naming there? The former (or some other solution not requiring changing the multiselect core files themselves) would be more desirable.

EDIT: This is what the code looks like more broadly.

import Multiselect from ‘vue-multiselect’;

import BbcodeEditor from ‘./../elements/bbcode-editor’;

import ApiVideoSelect from ‘./api-video-select’;

/* import other assets */

export default {

components: {ApiVideoClassDetail, ApiProgramCard, ApiUploader, Multiselect, Draggable, Datepicker, BbcodeEditor, ApiVideoSelect},

So when wondering how to edit this syntax to add the other multiselect under a different name. I don’t see how this could work:

import Multiselect from ‘vue-multiselect’;
import Multiselect from ‘./../../../../../../vendor/frismedia/scripts/vue/components/form/multiselect.vue’;

Solution :

You do not have to change core files, just change the name while using the component:

import Multiselect from ‘….vue/components/form/multiselect.vue’;

// the parent component
export default {
components: {
‘my-custom-multiselect’ : Multiselect
}
}

// in template:
<my-custom-multiselect> </my-custom-multiselect>

A simpler syntax: Change the name while importing

import MyCustomMultiselect from ‘….vue/components/form/multiselect.vue’;

export default {
components: {
MyCustomMultiselect
}
}

// in template:
<my-custom-multiselect> </my-custom-multiselect>

[Vue.js] DateTime formatting annotations not working with Vue app in Visual Studio

Do data annotations work with a vue.js app in Visual Studio?

there is a vue.js app with Visual Studio and I’m fetching a DateTime from a entity framework query. I’m using data annotations on the view model like below but it’s not getting formatted on the screen.

Any reason why?

part of the entity query

var recordsVM = records.Select(r => new GetRecordsReturnViewModel
{
StartDate = r.StartDate, // DateTime?
// other params
}

viewmodel

[DataType(DataType.Date)]
[DisplayFormat(DataFormatString = “{0:MM/dd/yyyy}”)]
public DateTime? StartDate { get; set; }

.vue

<td><span>{ props.item.startDate }</span></td>

what I’m seeing in each td

1943-09-01T00:00:00

Solution :

You are mixing ideas from different platforms. DisplayFormatAttribute can be used by ASP.Net MVC for server-side HTML generation (Razor views, etc.), but it is not something that is exposed to the client. There’s nothing that Vue.js (or any other front-end framework) can do with this.

Instead, use a client-side library to format the dates. Many exist, such as Date-fns, Luxon, or Moment. Or, you might consider using a library made specifically for Vue, such as vue-filter-date-format.

[Vue.js] How to use c3 in vue js?

there is been try from c3 site, but it does not work, this is my code

in template

<vue-c3 :handler=”handler”></vue-c3>

then in script

<script>
import VueC3 from ‘vue-c3’

export default {
name: ‘Dashboard’,
props: [‘handler’],
components:{ VueC3 },
data() {
return {

}
},
methods: {
initChart(){
const options = {
data: {
columns: [
[‘data1’, 2, 4, 1, 5, 2, 1],
[‘data2’, 7, 2, 4, 6, 10, 1]
],
},
}
this.handler.$emit(‘init’, options)
}
},
mounted() {
this.initChart();
}
};
</script>

chart not rendered, what is wrong?

Solution :

You missed

data () {
return {
handler: new Vue()
}
}

from documentation https://github.com/chryb/vue-c3

[Vue.js] How to copy a codepen.io example into a .vue

I found a codepen.io example (https://codepen.io/srees/pen/pgVLbm) to play around with in the context of a .vue.js app I’m working on, and I need some help transferring the <script> section over.

I copied the HTML chunk into a <template> and the CSS into a <style>. I’ve confirmed the .vue.js file works within the broader context (content loads when the <script> is commented out. I also placed <script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" /> immediately before my <script> to resolve the $ not defined error I was getting. Is there something I need to import into App.vue.js or into this particular .vue.js file? When I leave <script> uncommented, I simply get a blank page loaded.

<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" />
<script>
var hidWidth;
var scrollBarWidths = 40;

Solution :

you could define a method like this:

methods: {
renderStuff: function () {
var hidWidth;
var scrollBarWidths = 40;

var widthOfList = function(){
var itemsWidth = 0;
$(‘.list li’).each(function(){
var itemWidth = $(this).outerWidth();
itemsWidth+=itemWidth;
});
return itemsWidth;
};

var widthOfHidden = function(){
return (($(‘.wrapper’).outerWidth())-widthOfList()-getLeftPosi())-
scrollBarWidths;
};

var getLeftPosi = function(){
return $(‘.list’).position().left;
};

var reAdjust = function(){
if (($(‘.wrapper’).outerWidth()) < widthOfList()) {
$(‘.scroller-right’).show();
}
else {
$(‘.scroller-right’).hide();
}

if (getLeftPosi()<0) {
$(‘.scroller-left’).show();
}
else {
$(‘.item’).animate({left:”-=”+getLeftPosi()+”px”},’slow’);
$(‘.scroller-left’).hide();
}
}

reAdjust();

$(window).on(‘resize’,function(e){
reAdjust();
});

$(‘.scroller-right’).click(function() {

$(‘.scroller-left’).fadeIn(‘slow’);
$(‘.scroller-right’).fadeOut(‘slow’);

$(‘.list’).animate({left:”+=”+widthOfHidden()+”px”},’slow’,function(){

});
});

$(‘.scroller-left’).click(function() {

$(‘.scroller-right’).fadeIn(‘slow’);
$(‘.scroller-left’).fadeOut(‘slow’);

$(‘.list’).animate({left:”-=”+getLeftPosi()+”px”},’slow’,function(){

});
});
}
}

and run the method on mount like this:

mounted() {
this.renderStuff();
}

Side note, var is not ideal in this day and age. Recommend converting these to let.

[Vue.js] VueJS code - wrong behavor - whats wrong?

there is this code in VueJs , simple task list, completed and incompleted ones, when I check or uncheck the box the task should move to the proper list.

var app = new Vue({
el: ‘#vueapp’,
data: {
tasks: [{
id: 1,
description: ‘Do some Stuff’,
completed: false
},
{
id: 2,
description: ‘Go to pharmacy’,
completed: false
},
{
id: 3,
description: ‘Go to doctor’,
completed: true
},
{
id: 4,
description: ‘Do some Slask’,
completed: false
},
]
},
methods: {
toggleTask(key) {
this.tasks[key].completed = !this.tasks[key].completed;
}
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completedTasks() {
return this.tasks.filter(task => task.completed);
},
}
});
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id=”vueapp”>
<h2>Completed Tasks</h2>
<ul>
<li v-for=”(task, key) in completedTasks”>{ task.description }<input type=”checkbox” v-model=”task.completed”></li>
</ul>

<h2>Incomplete Tasks</h2>
<ul>
<li v-for=”(task, key) in incompleteTasks”>{ task.description }<input type=”checkbox” v-model=”task.completed”></li>
</ul>
</div>

tested in Chrome. Try check the first incomplete task , it moves on the upper list succesfully, but the next incomplete task gets checked too.!!!!

Solution :

You need to add a key to the loops :key=”task.id”.

To give vue.js a hint so that it can track each nodes identity, and thus reuse and reorder existing elements, you need to provide a unique key attribute for each item. An ideal value for key would be the unique id of each item.

var app = new Vue({
el: ‘#vueapp’,
data: {
tasks: [{
id: 1,
description: ‘Do some Stuff’,
completed: false
},
{
id: 2,
description: ‘Go to pharmacy’,
completed: false
},
{
id: 3,
description: ‘Go to doctor’,
completed: true
},
{
id: 4,
description: ‘Do some Slask’,
completed: false
},
]
},
methods: {
toggleTask(key) {
this.tasks[key].completed = !this.tasks[key].completed;
}
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completedTasks() {
return this.tasks.filter(task => task.completed);
},
}
});
.as-console-wrapper { display: none !important; }
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id=”vueapp”>
<h2>Completed Tasks</h2>
<ul>
<li v-for=”(task, key) in completedTasks” :key=”task.id”>{ task.description }<input type=”checkbox” v-model=”task.completed”></li>
</ul>

<h2>Incomplete Tasks</h2>
<ul>
<li v-for=”(task, key) in incompleteTasks” :key=”task.id”>{ task.description }<input type=”checkbox” v-model=”task.completed”></li>
</ul>
</div>