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

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

localhost/getnew

<html>
<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>
<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>
<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>

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

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: ‘/ongoing_events_admin’, component: require(‘./components/events.vue’).default } ,

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

//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 :

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

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

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

[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

};
});

})

[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

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

Another syntax

//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’
}
});

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

<i class=”fa fa-cogs” aria-hidden=”true”></i>

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

<h1>{blog.title}</h1>
{blog.content}
<i class=”fa fa-cogs” aria-hidden=”true”></i>
</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.
}
}