Vue same component inputs doesnt update

Question

I have reused same component at navigation menu and at peoples page

My issue is that when SearchComponent inputs in navigation updates its value Peoples page SearchComponent inputs doesnt update it's value vice versa. How should I do/achieve this in Vue JS. Below are my codes

SearchComponent

<template>
  <div class="search">
     <input type="text" v-model="name">
     <input type="text" v-model="email">
     <input type="text" v-model="age">
  </div>
</template>
<script>
export default {
    name: 'SearchComponent',
  data() {
    return {
      name: '',
      email: '',
      age: ''
    }
  }
}
</script>

Navigation

<template>
  <div class="nav">
    <ul>
      <li>Home</li>
      <li>Contact</li>
      <li>About</li>
    </ul>
    <SearchComponent />
  </div>
</template>
<script>
import SearchComponent from './SearchComponent'
export default {
    name: 'NavComponent',
  data() {
    return {
      name: '',
      email: '',
      age: ''
    }
  },
  components: {SearchComponent}
}
</script>

Peoples Page

<template>
  <div class="persons">
    <SearchComponent />
    <PersonList />
  </div>
</template>
<script>
import SearchComponent from './SearchComponent'
import PersonList from './PersonList'
export default {
    name: 'PersonsPage',
  data() {
    return {
      name: '',
      email: '',
      age: ''
    }
  },
  components: {SearchComponent, PersonList}
}
</script>

Teddy · Accepted Answer · 2019-08-30 07:25:42Z

2

Adding to @Eli, Try this way to share the same object reference for all the instances' data:

<template>
  <div class="persons">
    <SearchComponent />
    <PersonList />
  </div>
</template>
<script>
import SearchComponent from './SearchComponent'
import PersonList from './PersonList'
const personPageData = {
      name: '',
      email: '',
      age: ''
    };
export default {
    name: 'PersonsPage',
  data() {
    return personPageData; //Same state object referred by all instances.
  },
  components: {SearchComponent, PersonList}
}
</script>

answered Aug 30, 2019 at 7:25

Teddy

4,3333 gold badges38 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-15 22:52:07Z

2

That’s because each time you use a Vue Component, a new instance of it is created

Since components are reusable Vue instances, they accept the same options as new Vue, such as data, computed, watch, methods, and lifecycle hooks. The only exceptions are a few root-specific options like el.

So if you want if you want all Instance to be affected as single component Instead, a component’s data should not be declared as function but as object instead i.e.

data: {
  name: '',
  email: '',
  age: ''
}

Instead of

data: function () {
  return {
   name: '',
  email: '',
  age: ''
  }
}

For which in your case you have defined it as:

data() {
return { 
   name: '',
   email: '',
   age: ''
 }
}

You can also find more about Component Reusing and also Organizing Components and Since SearchComponent and PersonList component are child of Peoples Component you also need to have idea how to pass data from Parent Component i.e Peoples to Child components

edited Jul 15, 2022 at 22:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Aug 30, 2019 at 6:32

eli

9,4944 gold badges34 silver badges43 bronze badges

2 Comments

PenAndPapers Over a year ago

I tried to use data as an object but Vue returns an error in console saying that data mus be a function

Teddy Over a year ago

@PenAndPapers Declare a Global Object outside (in the script) and return the same object reference in the function's return statement.

Eder Díaz · Accepted Answer · 2019-08-30 05:54:22Z

0

Those SearchComponent even if they are the same component, they are different instances. Each one of them have their own independent data. If you want both to be in sync I'd recommend to use Vuex to have a global store that they can use as a source of truth.

answered Aug 30, 2019 at 5:54

Eder Díaz

2,1011 gold badge14 silver badges10 bronze badges

1 Comment

PenAndPapers Over a year ago

That was I was thinking, but were not allowed to use plugins and stuffs like that for this project. Vuex could have made our lives easier.

Collectives™ on Stack Overflow

Vue same component inputs doesnt update

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related