create a vue component using another page

Question

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>

I want 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 I have no idea how to do that. If someone can help. Thanks.

You could make components for the content1 as well as the content2 and content3 divs, and include them on both pages. — luckydonald
– luckydonald, Commented May 26, 2019 at 21:37

tony19 · Accepted Answer · 2022-07-15 23:53:18Z

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 your 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.

Collectives™ on Stack Overflow

create a vue component using another page

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related