link2192 link2193 link2194 link2195 link2196 link2197 link2198 link2199 link2200 link2201 link2202 link2203 link2204 link2205 link2206 link2207 link2208 link2209 link2210 link2211 link2212 link2213 link2214 link2215 link2216 link2217 link2218 link2219 link2220 link2221 link2222 link2223 link2224 link2225 link2226 link2227 link2228 link2229 link2230 link2231 link2232 link2233 link2234 link2235 link2236 link2237 link2238 link2239 link2240 link2241 link2242 link2243 link2244 link2245 link2246 link2247 link2248 link2249 link2250 link2251 link2252 link2253 link2254 link2255 link2256 link2257 link2258 link2259 link2260 link2261 link2262 link2263 link2264 link2265 link2266 link2267 link2268 link2269 link2270 link2271 link2272 link2273 link2274 link2275 link2276 link2277 link2278 link2279 link2280 link2281 link2282 link2283 link2284 link2285 link2286 link2287 link2288 link2289 link2290 link2291 link2292 link2293 link2294 link2295 link2296 link2297 link2298 link2299 link2300 link2301 link2302 link2303 link2304 link2305 link2306 link2307 link2308 link2309 link2310 link2311 link2312 link2313 link2314 link2315 link2316 link2317 link2318 link2319 link2320 link2321 link2322 link2323 link2324 link2325 link2326 link2327 link2328

[Vue.js] create a vue component using another page

How to load divs from page 2 into page 1 with VueJs.

localhost/getnew

<html>
<head>
<title> title </title>
<body>
<div id=”main”>
<div id=”content2”> this is content2</div>
<div id=”content3”> this is content3</div>
</div>
</body>
</html>

to get and use the id content2 from getnew to create a div into home with the content of that div, after the link was clicked and deleted, and do the same with content3, content4 and successively.

localhost/homepage

<html>
<head>
<title> title </title>
<body>
<div id=”main”>
<div id=”content1”> this is content1</div>
<a href=”#”> get content</a>
</div>
</body>
</html>

And then would be like that.

<html>
<head>
<title> title </title>
<body>
<div id=”main”>
<div id=”content1”> this is content1</div>
<div>this is content2</div>
<div>this is content3</div>
</div>
</body>
</html>

I’m new in VueJs and there is no idea how to do that. If someone can help. Thanks.

Solution :

In Vue, like in most SPA’s, the page (DOM) doesn’t hold data.
The page is a rendering tool which displays data held in the source. The source can be:

local data, kept in vm.data() (typically holding specific data for current component - it can be passed down to child components, though)
global data, held in a specialized module for holding data and managing state, passed to vm through computed (getters).
This specialized data module is called Vuex.
You interact with it dispatching actions, which commit mutations to Vuex state.
Any component, on any page, listening to the the Vuex data will be updated automatically on any change, regardless of which component triggered the mutation.

If the data is not overly complex, you might be able to manage it without Vuex, using a simple state management pattern.

So, in a nutshell, you don’t get the div with some #id from one page to another. You just mutate the store and then everywhere that data is used it updates.

[Vue.js] How to allow users to type address when using vue spa on google cloud storage

We are hosting a vue.js spa on google storage buckets and it works find for the main index page and for the links on the page but you are unable to type a url in and go the the page because google cloud tries to find the file instead of using vue.js router

If i switch off history mode it works because its a # instead of a path but we need history mode on for this to work

<Code>NoSuchKey</Code>
<Message>The specified key does not exist.</Message>
</Error>

Here is the XML data for not found pages

to have users able to type in the url and goes to that page. I would like to keep it on GCloud Storage buckets if possible if not a vm is fine.

Solution :

Fixed it by setting the 404 page to index.html

[Vue.js] Skip login screen while opening a vue route link

when using laravel and vue.js js in my app. All the vue.js routes ask for a login when opened as when using laravel auth. to create some routes that should be accessable without a user to be logged in. In other words some route that can be accessed by guest user as well. But at the moment all routes require user to be authenticated. These are my routes

const routes = [
{ path: ‘/dashboard_admin’, component: require(‘./components/dashboard.vue’).default},
{ path: ‘/ongoing_events_admin’, component: require(‘./components/events.vue’).default } ,
{ path: ‘/courses_admin’, component: require(‘./components/courses.vue’).default},
{ path: ‘/front_images_admin’, component: require(‘./components/front_images.vue’).default},
{ path: ‘/news_admin’, component: require(‘./components/news.vue’).default},

{ path: ‘/main’, component: require(‘./components/main_view/index_view_general.vue’) ,
name: ‘index’,
props: true ,
beforeEnter:DontrequireLogin
},

//general vue

// { path: ‘/‘, component: require(‘./components/main_view/index_view_general.vue’).default},

]

const router = new VueRouter({
mode: ‘history’,
routes // short for `routes: routes`
})

const app = new Vue({
el: ‘#app’,
router
});

These are my routes. some of these routes that can be accessed by guest user as well but at the moment all routes require user to be logged in.

Solution :

So you need to do this meta’s, for more about this you can read from its official documentation Route Meta

Let me explain litle bit what meta’s do .

in meta you define a bolean object which indicate , this route is for authenticated or users or for guest user. let see below example.

there is authenticated route, only for authenticated users.

{path: ‘/account-setting’,component:accountSetting,meta:{auth:true},

so i pass auth object in meta and decide in route.beforeach what to do with this route.

so same a normal route

{path: ‘/about’,component:about}

in this i give no meta, which means its for all user.

read the documentation to know how to use it.

[Vue.js] D3, Vue, and Typescript how to fix common errors for Expected 1 arguments, but got 0 and "Object is possibly 'null'

Disclaimer: when new to Typescript. Feel free to link docs to read up more on. there is reviewed the errors in isolation (outside the context of d3) but those solutions did not fix it.

there is a mixin:

import vue.js from ‘vue’;
import { Component, Mixin, Mixins } from ‘vue-mixin-decorator’;
import { Prop } from ‘vue-property-decorator’;

import CoreMixin from ‘./core’;
import * as d3 from ‘d3’;

@Mixin
export default class BandAxis extends Mixins<CoreMixin>(CoreMixin) {
// relevant props
@Prop({}) private sizeTo!: string;
@Prop({default: () => ( [‘one’, ‘two’, ‘three’] )}) private labels!: string[];
// lots of other props props

// relevant code
get scale() {
return d3.scaleBand()
.domain(this.labels)
.rangeRound([0, this.width])
.padding(0.1);
}

get axis() {
return d3.axisBottom()
.scale(this.scale)
.ticks(this.labels.length);
}
private bbox() {
const sel = d3.select(`#${this.sizeTo}`);
if (sel.empty()) {
return {
width: 0,
height: 0,
};
} else {
return sel.node().getBoundingClientRect();
}
}
// more stuff that isn’t related
}

Using this gives me:

Expected 1 arguments, but got 0.
get axis() {
\> return d3.axisBottom()

and:

Object is possibly ‘null’.
| };
| } else {
\> | return sel.node().getBoundingClientRect();
| ^
| }
| }

Any ideas?

Solution :

The first message indicates that the call to d3.axisBottom is missing an argument. It expects an AxisScale<Domain> argument.

The second message is warning you that sel can be null. It is treated as an error when compiling with –strictNullChecks (or –strict) enabled. To address that, you could either:

disable strictNullCheck (not recommended)
add a null-check for sel: if (sel) { /* use sel */ }
use the non-null assertion operator: sel!.node().getBoundingClientRect()

[Vue.js] $vuetify.goTo('#foo') not working on another router page

I try to smooth scroll using the function: goTo(“#how”) provided by Vuetify. It worked fine but when I go to a different router page it gives an error.

[vue.js warn]: Error in v-on handler: “Error: Target element “#how” not found.”

In my knowledge, it means that the target element does not exist.

I tried changing goTo(“/#how”), goTo(“/how”) but it seems to be of no hope.

//App.vue.js where the header, footer of my app exist and the button that calls the function: goTo()
<v-btn @click=”() => this.$vuetify.goTo(‘#how’)”>How it Works</v-btn>

//The section where the page should scroll when the button is clicked
<section id=”how”>
</section>

//the goTo scroll function provided by Vuetify
scrollBehavior: (to, from, savedPosition) => {
let scrollTo = 0

if (to.hash) {
scrollTo = to.hash
} else if (savedPosition) {
scrollTo = savedPosition.y
}

return goTo(scrollTo)
}

I expect it when on another route page and the button is clicked, it should scroll smoothly to the section.

Solution :

So, there is found a solution to my problem. It may not be the cleanest way but it works.

My solution is to put a conditional statement for the buttons.

//First check if the current route is on landing page (or wherever the #foo is) then set the click function for it.
<v-btn v-if=’this.$route.path == “/“‘ color=”white” @click=”() => this.$vuetify.goTo(‘#foo’)” flat>How it Works</v-btn>

//If route.path is not at “/“ then we call the router push to redirect first to Landing and then scroll.
<v-btn v-else color=”white” @click=”() => this.$router.push(‘/#foo’)” flat>How it Works</v-btn>

[Vue.js] Which event is triggered when v model value is changing

I’m new to Vuejs and my requirement is to write a single functional globally to trigger whenever v-model value of my form elements are set. I tried to write this for element.onchnage but this is not working.

Can some one tell me which HTML event is triggered when the v-model value is set in vuejs ?

Solution :

Hey Linu and welcome to SO.

Check out the docs for Form input bindings:
https://vuejs.org/v2/guide/forms.html

There it says:

v-model internally uses different properties and emits different
events for different input elements:

text and textarea elements use value property and input event
checkboxes and radiobuttons use checked property and change event;
select fields use value as a prop and change as an event.

So instead of v-model you can do the following for inputs

<input :value=”dataProperty” @input=”dataProperty = $event.target.value” />

[Vue.js] How to preview files before uploaded to server by using file-upload component of vue.js & element-ui?

I’m using vue.js & element-ui to upload files and preview files. to preview file(.pdf/.docx/.jpg…) before uploaded to server.

<el-upload
ref=”uploadFile”
:on-change=”onUploadChange”
:on-preview=”handlePreview”
:on-remove=”handleRemove”
:before-remove=”beforeRemove”
:file-list=”fileList”
:http-request=”handleUpload”
:data=”extendData”
:auto-upload=”false”
class=”upload-demo”
drag
action=”uploadUrl”
multiple>
<i class=”el-icon-upload”/>
<div class=”el-upload__text”>drag here, or <em>click to upload</em></div>
</el-upload>

Only the on-change function can get the content of the file, while the on-preview function only get the meta message. How to get the file content and preview that before which is uploaded to server?

Solution :

It’s not the meta, it’s the file. So you need to use a FileReader on the file:

handlePreview(file) {
const reader = new FileReader()

reader.onload = e => console.log(e.target.result) // here is the result you can work with.

reader.readAsText(file)
}

[Vue.js] load routes from api and import views dynamically

The most of my routes are protected and require permissions to access them. When the user signed in successfully my Navbar component makes an API call and retrieves a bunch of routes the user is able to access.

After that I add all the view files matching to the routes to the navbar.

This is an example code showing the process

<template>
<div>
<router-link
v-for=”navItem in navItems”
:key=”navItem.title”
:to=”navItem.url”
\>{ navItem.title }</router-link>
</div>
</template>

<script>
export default {
data: function() {
return {
navItems: []
};
},
created: async function() { // Setup the router here
this.navItems = [
// !!! API CALL !!!
{
title: “Dashboard”,
url: “/Dashboard”
},
{
title: “Users”,
url: “/users/Users”
},
{
title: “Groups”,
url: “/groups/Groups”
}
];

const routes = await this.navItems.map(async navItem => {
const { url } = navItem;

return {
path: url,
component: await import(`../views${url}.vue`)
};
});

this.$router.addRoutes(routes);
}
};
</script>

Unfortunately I get this error

Uncaught (in promise) Error: [vue-router] “path” is required in a
route configuration.

but as you can see in the example code this attribute is set. I created an sample project here

https://codesandbox.io/s/vue-routing-example-i2znt

If you call this route

https://i2znt.codesandbox.io/#/Dashboard

I would expect the router to render the Dashboard.vue.js file.

Solution :

the routes array that you build doesn’t contains the routes objects.
It’s an array of promises.

you should do something like

Promise.all(routes).then(resolvedRoutes => {
this.$router.addRoutes(resolvedRoutes)
})

[Vue.js] Cannot find element

I’m using Vuejs. This is my markup:

<body>
<div id=”main”>
<div id=”mainActivity” v-component=”{currentActivity}” class=”activity”></div>
</div>
</body>

This is my code:

var main = new Vue({
el: ‘#main’,
data: {
currentActivity: ‘home’
}
})
;

When I load the page I get this warning:

[vue.js warn]: Cannot find element: #main

What am I doing wrong?

Solution :

I think the problem is the script is executed before the target dom element is loaded in the dom… one reason could be that you have placed the script in the head of the page or in a script tag that is placed before the div element #main. So when the script is executed it won’t be able to find the target element thus the error.

One solution is to place the script in the load event handler like

window.onload = function () {
var main = new Vue({
el: ‘#main’,
data: {
currentActivity: ‘home’
}
});
}

Another syntax

window.addEventListener(‘load’, function () {
//the script
})

Solution 2:

I’ve solved the problem by add attribute ‘defer’ to the ‘script’ element.

Solution 3:

I get the same error. the solution is to put the script code before the end of body, not in the head section.

Solution 4:

The simple thing is to put the script below the document, just before the closing </body> tag:

<body>
<div id=”main”>
<div id=”mainActivity” v-component=”{currentActivity}” class=”activity”></div>
</div>
<script src=”app.js”></script>
</body>

app.js file:

var main = new Vue({
el: ‘#main’,
data: {
currentActivity: ‘home’
}
});

[Vue.js] Unable to create the correct link with vue router-link

when using the vue.js rounter-link tag to navigate to a different page. My problem is that it does not seem to navigate to a different page. I think the problem lies within the “params” of the router-link. I do have a blog_id as 2 but it always shows the current page blog_id that when at.

Initially I have

<router-link v-bind:to=”{name:’datascience-single’, params: {blog_id: blog.blog_id}”>
<i class=”fa fa-cogs” aria-hidden=”true”></i>
</router-link>

but then I started to think that maybe it’s not taking the blog.blog_id correctly so I replaced it with a fixed value

<li v-for=”blog in blogs” v-bind:key=”blog.id”>
<h1>{blog.title}</h1>
{blog.content}
<router-link v-bind:to=”{name:’datascience-single’, params: {blog_id: 2}”>
<i class=”fa fa-cogs” aria-hidden=”true”></i>
</router-link>
</li>

However the problem remains the same.

Solution :

This answer assumes you are already on the same route you are navigating to.

Navigating to the same route does not refresh the components. We are used that whenever we go to a different URL the page should refresh, with multipage websites. However vue.js router handles this differently. For the router the route, eg: /blogs/{id}, is not changing whenever id is being updated, we are still on /blogs/{id} but with a different parameter.

In order to detect this change we can simply make a watcher on the route parameter:

watch: {
‘$route.params.id’: (id) => {
// The route is the same, but our parameter changed.
}
}