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.

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.

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
}]
}
]
})

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.

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>

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()
}
}

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.

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>

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.

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