vue how to assign value in html?

Question

This is my usecase:

<div v-if="getObject()">
    <div v-if="getObject().someBoolean">
        {{getObject().someOtherKey}}
    </div>
</div>

I don't want to be calling getObject everywhere so I'm wondering if there is a way to simply assign a value after calling getObject and then reusing that within the same div?

Note I can't use v-for since it iterates over the keys, and in my example I need 2 keys in the same iteration.

Change getObject to a computed?

Bert
– Bert

2017-03-19 17:16:43 +00:00
Commented Mar 19, 2017 at 17:16 — Bert
– Bert, Commented Mar 19, 2017 at 17:16

Edmundo Santos · Accepted Answer · 2017-03-19 17:27:29Z

2

Use the return function of getObject as a computed property, then access it later.

Edit:

data: {
   ids: [],
},
computed: {
   objects() {
     return this.ids.map(getObject);
   }
}

Then you iterate over objects, instead your ids.

edited Mar 19, 2017 at 17:27

answered Mar 19, 2017 at 17:17

Edmundo Santos

8,3163 gold badges31 silver badges41 bronze badges

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

2 Comments

Terence Chow Over a year ago

What if getObject is really getObject(id) and my function is used within v-for block that iterates over some ids?

Edmundo Santos Over a year ago

I've made some edition with a suggest. Also, see that link: github.com/vuejs/vue/issues/2025 This feature doesn't exist because is bad in 99% percent of the cases.

Bill Criswell · Accepted Answer · 2017-03-19 17:22:05Z

0

You should be able to do something like:

computed: {
  theObject () {
    return this.getObject()
  },
},

Then just use theObject.whatever in your templates.

answered Mar 19, 2017 at 17:22

Bill Criswell

33k8 gold badges80 silver badges68 bronze badges

2 Comments

Terence Chow Over a year ago

What if getObject is really getObject(id) and my function is used within v-for block that iterates over some ids?

Bill Criswell Over a year ago

It sounds like each iteration should be its own component in that case. Otherwise, you could a computed property of them all and just loop through that like Edmundo suggests above.

Collectives™ on Stack Overflow

vue how to assign value in html?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related