CODEWITHSUNDEEP
javascriptvue.js
asma
asma

Reputation: 629

access other properties of the same element by another property in Vue.js

Is there a way to access other properties of the same element by another property in Vue.js ?

example:

instead of writing:

<kpi title="some_kpi" v-if="displayed_kpi==='some_kpi'"></kpi>

do something like this:

<kpi title="some_kpi" v-if="displayed_kpi===title"></kpi>

which means that I want to access the value of the title inside the v-if of the same tag. (Obviously this doesn't work like this) Is there a way ?

Upvotes: 2

Views: 502

Answers (1)

Mike D.
Mike D.

Reputation: 164

Update:

You can access the attributes of an element by the $refs variable. This is a great way to get information from nested components, since you have access to the children attribute of the element. (see here)

However, adding the ref attribute will not work for your example with the v-if because when v-if is false it removes the entire element.

Plus, there would be issues of synchronization with the $refs variable and the creation of the element. Here is more on lifecycle hooks).

<button @click="$event => $forceUpdate()">update me</button>
<kpi ref="MyKpi" title="some_kpi">{{ $refs.MyKpi?.title }}</kpi>

This show how on render $refs.MyKpi does not exist because the element has not been rendered. but when you force the DOM to update. you can see that we do have access to the attributes in the kpi element.

The $refs variable gives you flexibility for more complex operations on attributes of elements.

Upvotes: 0

Related Questions