How to set vue-data after new vue and work for data-binding

Question

e.g:
I need to add data-value after new vue and work for data-binding.

why i need to do that :

I know it's work if i declare first on new Vue object.
But there's a old project with a lot of layout-subject-page,if i need to add a vue global varible then i need to edit every page's vue data-value.

what i expected :

var app = new Vue({
  el: '#app',
  data: {}
})
app.$data.message = "test"

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h1>{{ message }}</h1>
</div>

Are you wanting to dynamically add a new data prop and update the template to use that prop. While the former is possible, I don't believe the latter is. — tony19
– tony19, Commented Apr 13, 2020 at 3:32
@tony19 yes,i want it. dynamically add a new data prop and update the template to use that prop and work for adding after new Vue object — Wei Lin
– Wei Lin, Commented Apr 13, 2020 at 3:35

tony19 · Accepted Answer · 2022-07-16 00:33:28Z

1

It can't be done.

Vue runs internal setup on the initially declared data properties which won't happen if you try to declare them later.

From the docs:

Vue does not allow dynamically adding new root-level reactive properties to an already created instance.

You can add new object/array items using Vue.set if that helps you.

edited Jul 16, 2022 at 0:33

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 13, 2020 at 4:55

Dan

63.5k18 gold badges113 silver badges122 bronze badges

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

Collectives™ on Stack Overflow

How to set vue-data after new vue and work for data-binding

why i need to do that :

what i expected :

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

why i need to do that :

what i expected :

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related