CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
mohanraj0411
mohanraj0411

Reputation: 31

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>

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.

Upvotes: 3

Views: 332

Answers (1)

tao
tao

Reputation: 90138

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.

Upvotes: 2

Related Questions