Manipulating the data value in Vue.js

Question

How can I set the value of name to the property personOne in object? So that name will have the value of Alex.

var app = new Vue({
  el: '#app',
  data: {
    name: '',
    object: { "personOne": "Alex", "personTwo": "Jack"}
  }
})

Can you give us an actual, real-usage example? Seems fairly clear the real scenario isn't as hard-coded, or you'd just do name: 'Alex' and be done with it. Are you loading object via AJAX or something? If so, a computed property is probably reasonable. — ceejayoz
– ceejayoz, Commented Jan 22, 2017 at 3:01
BTW this is not valid javascript object - it should be key -> value - personOne: 'Alex' — Belmin Bedak
– Belmin Bedak, Commented Jan 22, 2017 at 11:57

Frazer Kirkman · Accepted Answer · 2017-01-22 14:18:12Z

1

From within the Vue object you write

this.name = 'Alex' and outside you write app.name = 'Alex'

app.someDataField will change the data property called someDataField

answered Jan 22, 2017 at 14:18

Frazer Kirkman

1,1841 gold badge15 silver badges25 bronze badges

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

Comments

tony19 · Accepted Answer · 2022-07-16 02:27:42Z

1

You can use one of the life-cycle hooks like created created or mounted for setting initial data, loading data from API, etc, like following:

var app = new Vue({
  el: '#app',
  data: {
    name: '',
    object: { "personOne": "Alex", "personTwo": "Jack"}
  },
  methods: {
    setName (name) {
      this.name = name
    }
  },
  mounted () {
     this.setName(this.object.personOne)
  },
})

edited Jul 16, 2022 at 2:27

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 22, 2017 at 2:47

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

3 Comments

ceejayoz Over a year ago

This seems a bit overcomplicated when a simple computed property would suffice.

Saurabh Over a year ago

@ceejayoz I don't think OP just wants a computed property as in that case he can just access this.object.personOne.

ceejayoz Over a year ago

That's why I'm thinking OP has something else going on that they're not explaining well.

Collectives™ on Stack Overflow

Manipulating the data value in Vue.js

2 Answers 2

Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Related