Vuejs bind variable in JSX with scope

Question

I am essentially looking for something like:

<div v-for="k in keys" :key="k">
 {{ k }}
 ...
   <div v-with:myvalue="functionOf(k)">
     {{ myvalue }}
   </div>
</div>

I don't know how you would call such thing, but I can tell I have similar code in places and that could be handy.

What are you trying to do exactly? please ask a question so we can help you — Jalil
– Jalil, Commented May 21, 2019 at 8:48
It's really difficult to understand your question. Could you clarify what you are trying to do? — RomOne
– RomOne, Commented May 21, 2019 at 8:49
@Jalil I am looking for similar functionality for the 'v-with' directive, which is imaginary - Essentially cache a function of a variable that the v-for directive provides to use on corresponding scope — ntakouris
– ntakouris, Commented May 21, 2019 at 8:53

tony19 · Accepted Answer · 2022-07-16 00:52:59Z

1

You can use the computed property to make functions that transform the values into something else.

For example lets say you have this code here.

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

You can add add a computed property to run some js code and just call it in the html template

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p> //computed function
</div>


var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

You can read more about it in the official documentation

Example with v-for

<div v-for="k in keys" :key="k">
 {{ k }}
   <div>
     {{ reversedMessage(k) }}
   </div>
</div>


var vm = new Vue({
  el: '#example',
  computed: {
    // a computed getter
    reversedMessage(k){ //you receive the value for each k you have in keys
      return k.split('').reverse().join('')
    }
  }
})

edited Jul 16, 2022 at 0:52

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 21, 2019 at 8:59

Jalil

1,2761 gold badge15 silver badges36 bronze badges

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

5 Comments

Jalil Over a year ago

Of course you can also send some parameters like your K object to work with it in the v-for

ntakouris Over a year ago

But then you can't have one per each for-loop iteration dynamically

Jalil Over a year ago

You need different behaviors for each value?

ntakouris Over a year ago

I need a uniform behaviour for each value. Look at the original questions snippet. I know what can already be done with computed properties

Jalil Over a year ago

I modified my answer to add a v-for example, is that what you needed? Check it out

Collectives™ on Stack Overflow

Vuejs bind variable in JSX with scope

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related