How reload Object property changes in DOM element in vue?

Question

I need to show the status of an object if it has a property or not. I add a property id to object and console.log shows it is true, But it is not updated in DOM element. How can I see the status in DOM element?

var app = new Vue({
  el: '#app',
  data() {
    return {
      children: {}
    }
  },
  methods: {
    fillChildren() {
      this.children['id'] = 'child1Id'
      console.log(this.children.hasOwnProperty('id')) // This is true
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div @click="fillChildren">Fill children</div>
  {{children.hasOwnProperty('id')}} <!-- I want to see true after click -->
</div>

tony19 · Accepted Answer · 2022-07-16 00:30:19Z

1

From Reactivity in Depth:

Vue cannot detect property addition or deletion.

You can circumvent this limitation by using the vm.$set instance method:

var app = new Vue({
  el: '#app',
  data() {
    return {
      children: {}
    }
  },
  methods: {
    fillChildren() {
      this.$set(this.children, 'id', 'child1Id')
      console.log(this.children.hasOwnProperty('id')) // This is true
    }
  }
})

<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <div @click="fillChildren">Fill children</div>
  {{children.hasOwnProperty('id')}} <!-- I want to see true after click -->
</div>

edited Jul 16, 2022 at 0:30

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 16, 2021 at 9:07

slauth

3,2581 gold badge14 silver badges21 bronze badges

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

Collectives™ on Stack Overflow

How reload Object property changes in DOM element in vue?

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