link959 link960 link961 link962 link963 link964 link965 link966 link967 link968 link969 link970 link971 link972 link973 link974 link975 link976 link977 link978 link979 link980 link981 link982 link983 link984 link985 link986 link987 link988 link989 link990 link991 link992 link993 link994 link995 link996 link997 link998 link999 link1000 link1001 link1002 link1003 link1004 link1005 link1006 link1007 link1008 link1009 link1010 link1011 link1012 link1013 link1014 link1015 link1016 link1017 link1018 link1019 link1020 link1021 link1022 link1023 link1024 link1025 link1026 link1027 link1028 link1029 link1030 link1031 link1032 link1033 link1034 link1035 link1036 link1037 link1038 link1039 link1040 link1041 link1042 link1043 link1044 link1045 link1046 link1047 link1048 link1049 link1050 link1051 link1052 link1053 link1054 link1055 link1056 link1057 link1058 link1059 link1060 link1061 link1062 link1063 link1064 link1065 link1066 link1067 link1068 link1069 link1070 link1071 link1072 link1073 link1074 link1075 link1076 link1077 link1078 link1079 link1080 link1081 link1082 link1083 link1084 link1085 link1086 link1087 link1088 link1089 link1090 link1091 link1092 link1093 link1094 link1095

[Vue.js] How to use components in my custom js file in Laravel and Vue.js? Subscribe to RSS

I’m new to Laravel and Vue.js. I created a simple Laravel/Vue.js project like this post: https://itsolutionstuff.com/post/laravel-5-and-vue-js-crud-with-pagination-example-and-demo-from-scratchexample.html

Now to add date-picker to my blade files: https://talkhabi.github.io/vue-persian-datetime-picker/#/installation

However, when I import component to my js file (for example item.js), I get the following error message:

SyntaxError: import declarations may only appear at top level of a module.

Solution :

the import statements must come first at the beginning of the JS files. No import statements should come after regular code.

[Vue.js] How can I prevent Vuex from interfering with my class instance? Subscribe to RSS

when trying to store an instance of a class in Vuex (the EditorState from ProseMirror). This class is more or less immutable from the outside, meaning that whenever to make changes to it, I will just put a new instance of the class into Vuex.

As such, I do not need Vue’s change tracking here, and in fact it actually seems to interfere with the internal workings of ProseMirror, so I was wondering if there was a way that I could isolate my object from vue.js so that it is treated atomically.

Solution :

I fixed it by taking the suggestion from the top answer on this question and freezing my class instance before giving it to Vuex.

const store = new Store<AppState>({
state: {
editor: Object.freeze(editorState), // freeze because vue.js reactivity messes it up
filename: null,
metadata: {}
},
mutations: {
updateDocument(context, transaction: Transaction) {
console.log(“updateDocument called”);

// freeze again
context.editor = Object.freeze(context.editor.apply(transaction));
}
},
strict: process.env.NODE_ENV === “development”
});

Since Object.freeze is not recursive, this doesn’t have any effect on the internal workings of ProseMirror, but it discourages vue.js from trying to modify the object.

[Vue.js] Router link changes the path but Router view doesnt change Subscribe to RSS

So there is a side navbar and some link in it. The entry point is the homepage. The problem is, when i’m trying to change router-view using router-link in my side navbar, the router-view doesn’t change, but the path has change.

So here’s my route path on my router.js:

{
path: ‘/‘,
component: Home,
children: [
{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: TodoList
}
]
},
],

And here’s my App.vue

<div class=”container”>
<div class=”main__content”>
<div class=”sidenav”>
<aside class=”menu”>
<ul class=”menu-list”>
<li><router-link :to=”{ name: ‘theTask’, params: {name: ‘today’} }”>Today</router-link></li>
<li><router-link :to=”{ name: ‘home’ }”>Next 7 Days</router-link></li>
</ul>
</aside>
</div>
<div class=”content”>
<router-view></router-view>
</div>
</div>
</div>

It rendered the homepage, but when i’m clicking router-link to the child route, it doesn’t change the router-view, only the router link.

Solution :

The real question is what is happening under the Hood.

routes.js

var routes = [{
path: ‘/‘,
name: ‘home’, // missed this one
component: Home,
children: [
{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: TodoList
}
]
}]

the parent is Home and the child is TodoList the route for parent is / and route for the child is /:name. you are trying to change the view true. and it’s changing. But you can’t see it. because there is no router-view in the parent of the component you are trying to change.

By default, the parent is App.vue.js for every object in the routes array(if you don’t change it otherwise).
So Parent of component Home is App.vue. But the parent of TodoList is component Home. when sure the Home.vue.js doesn’t have <router-view>. When you are trying to render component TodoList it is rendering its parent and then finding <router-view> in its parent and trying to render itself there. But there isn’t. And even if you add <router-view> in the Home.vue.js what you will have is both Home and TodoList rendering.
What I presume you are trying to do is to render Home and TodoList render separately on App.vue.js place. there are 2 options.

in routes.js file add 2 paths one for / and another for /:name

var routes = [
{
path: ‘/‘,
name: ‘home’,
component: Home,
},
{
path: ‘/:name’,
name: ‘theTask’,
props: true,
component: TodoList
}];

have a base component(if you really need it) and add 2 children.

var routes = [{
path: ‘/‘,
component: Base,
children: [
{
path: ‘/‘,
name: ‘home’,
component: Home
},
{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: TodoList
}
]
}]

Have a closer look at Evan You’s example here

Solution 2:

when not sure about the use case but most likely you don’t need to use children in the routes. That is meant for components that live ON the original page as their parent. If you just want a different component on a different page, you should define them as individual routes:

{
path: ‘/‘,
name: ‘Home’,
component: Home
},
{
path: ‘/:name’,
name: ‘theTask’, // although IMO this should be called something like “TodoList”
component: TodoList
}

You can then use the vue.js Developer Tools (for Chrome) to inspect and see which route is currently being rendered on the page.

Solution 3:

In this case you should provide an empty subroute path. there is created a fiddle for the same here. This is as per the vue-router documentation.

{ path: ‘/‘,
component: Base,
children: [{
path: ‘’,
name: ‘Home’,
component: Home
},{
path: ‘:name’,
name: ‘theTask’,
props: true,
component: Foo
}]
}
]
})

[Vue.js] Vue.js Select All Options Subscribe to RSS

I tried to use Vue.js to make a Select with a list of options and one option called ‘Any’ which will select all options.

to use HTML select Tag, not a checkbox.

when trying to do something like this but when not sure it is the right way to do it.

<div id=”app”>
<select v-model=”selected”>
<option v-for=”option in options” v-bind:value=”option.value”>{option.text}</option>
</select>

<span>Selected: { selected }</span>
</div>

let app = new Vue({
el: ‘#app’,
data: {
selected: [‘A’, ‘B’, ‘C’],
options: [
{ text: ‘One’, value: ‘A’ },
{ text: ‘Two’, value: ‘B’ },
{ text: ‘Three’, value: ‘C’ },
{ text: ‘Any’, value: [‘A’, ‘B’, ‘C’] },
]
}
});

Solution :

You data property must be a function not an object.
try this:

data(){
return {
selected: [‘A’, ‘B’, ‘C’],
options: [
{ text: ‘One’, value: ‘A’ },
{ text: ‘Two’, value: ‘B’ },
{ text: ‘Three’, value: ‘C’ },
{ text: ‘Any’, value: [‘A’, ‘B’, ‘C’] },
]
}
}

Also see the docs that you must have the data as a function in almost all cases.

[Vue.js] How to change the colour of a button when clicked on? (Vue) Subscribe to RSS

I’m trying to get a button that changes its color when pressed on it. When it is pressed again, it should change back to its original color. What am I doing wrong?

The Button in my template:

<th><Button v-bind:class=”{‘white’: !clicked, ‘blue’: clicked}” v-on:click =”!clicked” ></Button></th>

<script>
export default {
data: {

clicked: false
}

}

</script>

<style>
.white {
background-color: white;
width: 200px;
height: 200px;

}
.blue {
width: 200px;
height: 200px;
background-color: blue;

}

</style>

Solution :

You should set clicked property explicitly by @click=”clicked = !clicked”:

<th>
<Button
v-bind:class=”{‘white’: !clicked, ‘blue’: clicked}”
v-on:click =”clicked = !clicked”
/>
</th>

[Vue.js] can't use passed prop in child's method {} vue.js Subscribe to RSS

I pass the array to child as prop. And trying to use it in google map method. But when I use it inside initMap: function the array being empty.

in parent

<div class=”mapWrap”>
<mapping :articles=”filterArticles” />
</div>

computed: {
filterArticles(){
let api = this.$store.getters.articles;

let filteredStates = api.filter((article) => {
return (this.keyword.length === 0 || article.address.includes(this.keyword)) &&
(this.regions.length === 0 || this.regions.includes(article.region)) &&
(this.rooms.length === 0 || this.rooms.includes(article.rooms1)) &&
(this.city.length === 0 || this.city.includes(article.city))
});

return filteredStates;
},
}

in child

props: {
articles: {
type:Array
},
},
name:”mapping”,
data(){
return {
marker:[],
}
},
mounted(){
this.initMap();
},
methods: {
initMap: function() {
var mapOptions = {
mapTypeId: ‘roadmap’,
center: new google.maps.LatLng(35.652832, 139.839478),
zoom: 10
};

var map = new google.maps.Map(document.getElementById(“map”), mapOptions);

var articles = this.articles;
console.log(articles);

},
},

The way when doing it wrong? Because prop has the items but when I put it inside the initMap method, it starts being empty…

Solution :

there is tried to trace the code and from what you have, it will work in most cases EXCEPT if the data that you have fetched using this.$store.getters.articles is async. Ideally, you should not be relying on the child component’s mount event because it can get mounted way before you can display any data. To verify that, you can add a console.log(this.articles) inside the mounted hook and see that it’s most likely empty.

What I suggest you do is, given that in the parent component you have articles as a computed property (which is reactive), you should also call the initMap inside the child every time the prop articles changes. The easiest way to do just that is with a watcher inside the child component:

watch: {
articles () {
this.initMap()
}
}

[Vue.js] How to append array into data from ipcRenderer Subscribe to RSS

when trying to get select the list of files(path) from directory and display it on the DOM,but in order to display data there is to first assign in vuejs data object.

mainRenderer

ipcMain.on(“channel1”, (e, args) => {
const files = getFileFromUserSelection();
e.reply(“channel1”, files); // sending to channel1 in app.vue
});

const getFileFromUserSelection = () => {
const files = dialog.showOpenDialog({
properties: [“multiSelections”]
});
if (!files) return;
return files;
};

App.vue.js

<template>
<div>
<p v-for=”file in files”>{file}</p>
</div>
</template>

<script>
import { ipcRenderer } from “electron”;

//this gets files from the main process
ipcRenderer.on(“channel1”, (e, files) => {
console.log(files); // this file into data:function()
});

export default {
data: function() {
return {
files: []
};
},
methods: {
clicked: function() {
ipcRenderer.send(“channel1”, “open dialog to getFiles from user”);
}
}
};

</script>

Solution :

You can use the beforeCreate hook on the Vuecomponent in order to hydrate the data property:

export default {
data: function() {
return {
files: []
};
},
beforeCreate() {
ipcRenderer.on(“channel1”, (e, files) => {
this.files = files
});
},
methods: {
clicked: function() {
ipcRenderer.send(“channel1”, “open dialog to getFiles from user”);
}
}
};

Note that, of course, you cannot interact directly with the files array until you know it’s been hydrated, so a computed getter here may be of some use to you, or just use files.length.

[Vue.js] Multiple button toggle without using routes Subscribe to RSS

I’ve built a two button toggle using v-on:click that renders a specific data object on click, while removing the previously clicked object. I would like to continue this functionality with multiple data objects, so I could have numerous buttons and respective objects. I would like to achieve this without using routing but when unsure of the best way.

Codepen - https://codepen.io/somosfeer/pen/xNMZbx

I’m assuming I should be using binding, but I was unable to have a variable dynamically update depending on the which button is clicked.

So Ideally the buttons would be like:
<h1><button v-on:click=”data_object_one = “active”>Super
Mario Object Data 1 </button></h1>

<h1><button v-on:click=”data_object_two = “active”>Super
Mario Data Object 2 </button></h1>

<h1><button v-on:click=”data_object_three = “active”>Super
Mario Data Object 3 </button></h1>

And so on for as many buttons and data objects that I would want to include.
I’ve tried to create a dynamic variable that was updated by the user click, however I was never able to get the variable to work with my other functions.

Hopefully the code pen illustrates what I’m trying to achieve. Basically that same functionality but with lots of buttons. Not asking for someone to do this for me, just a clear direction that I can pursue to achieve this.

Solution :

You are building something similar to an Accordion component.

What’s needed is to store the toggle data sets in a larger list, along with an activeIndex property in the app data. In the template, you would iterate through the list’s objects, using v-if or v-show to test whether the data should be shown. This would be dependent on whether any object’s list index matches activeIndex. You set activeIndex through a click handler when a button is clicked. This may seem complicated because there are major structural issues with the code. I recommend learning vue.js more because the codepen is not formed well:

1) You should have only 1 instance of new vue.js rather than splitting the app into multiple apps.

2) You’ll want to use a reusable component for the toggle sets rather than retype and recreate the same functionality repeatedly in the template and the code. Generally, you want to avoid violating the DRY (Don’t Repeat Yourself) maxim of programming. A component-based framework like vue.js intends to solve this by using components.

3) You can use component props to pass the data for each set to its component.

4) You also don’t want to have to manually type out the component code in the template in every place that you want the next component, when you can use a list instead. This is the idea behind v-for: generating repeated template content based on a list.

So, you’ll want to create a larger array that holds a list of all of the toggle set data, which you can then iterate using v-for, creating a toggle component in each iteration. Something like this:

<div id=”app”>
<div v-for=”(info, index) in mydata”>
<button @click=”setActive(index)”>
{ info.title }
</button>
<div v-show=”index == activeIndex”>
<Toggle :info=”info” />
</div>
</div>
</div>

[Vue.js] Vuetify, v-data-table headers value purpose Subscribe to RSS

What is the purpose of the value property in headers array of objects for v-data-table?

In the documentation it says

An array of objects that each describe a header column. See the example below for a definition of all properties.

{
text: string”,
value: string”,
align: ‘left’ | ‘center’ | ‘right’”,
sortable: boolean”,
class: string[] | string”,
width: string”
}

But it never actually explains the purpose of it.

Does the header object just need a unique key or can I can someone use that value in the html?

Solution :

When you define that column as sortable: true, it is the value, and not the text, that will be set on the pagination object.

For instance, my column is called Created at (text), and it’s value is created_at. This allows me to watch the pagination object, and send the order by data directly without an extra mapping step, as my API expects the value of orderBy to be either created_at or nothing.

[Vue.js] update the height of a DOM element by adding a resize event listener Subscribe to RSS

I would like to make sure that my component has the same height as width. To achieve this I added the resize event listener. Currently there is this code

<template>
<div
:ref=”cellId”
\>
</div>
</template>

<script>
export default {
data: function() {
return {
cellId: ‘_‘ + Math.random().toString(36).substr(2, 9)
};
},
methods: {
updateCellHeight: function() {
this.$refs[this.cellId].clientHeight = this.$refs[this.cellId].clientWidth;
}
},
created: function() {
window.addEventListener(“resize”, this.updateCellHeight);
this.updateCellHeight();
},
destroyed: function() {
window.removeEventListener(“resize”, this.updateCellHeight);
}
}
</script>

So all I do is generating a unique ID to access the DOM element within the vue.js instance. Further I run my event and set the height equal to the width.

When creating multiple components via looping and resizing the window I get this error

Uncaught TypeError: Cannot assign to read only property ‘clientHeight’
of object ‘#’
at VueComponent.updateCellHeight

How can I access my HTML element and make sure that its height is equal to its width?

Solution :

As the error message is trying to tell you, clientHeight is a read only property. You’ll probably want to modify the style.height property, but keep in mind clientHeight includes the padding. Try getting the element style using Window.getComputedStyle() and getting the width from there.

However, you can actually achieve this without using any JS at all: http://www.mademyday.de/css-height-equals-width-with-pure-css.html