How to make temporary variable in VueJs' templates?

Question

Is there a way to declare temporary variable in a VueJS template? My problem is that in a v-for i check if the actual value exists in an Array and if not I print another text, but for each element of the v-for it will do this twice (firstly to check if exists, and then to print the value) where with a variable it could be done once.

I'm using VueJS2 without any preprocessor nor template engines.

Here it's my array :

let formats = [
    {id: 1, label: "A3"},
    {id: 1, label: "A4"},
    {id: 1, label: "A5"},
    {id: 1, label: "A6"},
];

Here is my template :

<tr v-for="data in ajaxDatas">
    <td>
        <template
            v-if="formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            })"
        >
            {{ formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            }).label }}
        </template>
        <template v-else>
            Other format
        </template>
    </td>
</tr>

As you can see it's not really optimized... I was thinking in a way to make a temporary variable to stock the find return, something like this :

<tr v-for="data in ajaxDatas">
    <td>
        {{
            var f = formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            });
            f ? f.label : 'Other format'
        }}
    </td>
</tr>

FOR THE MOMENT i found a way but it's not working properly, i can make something like this :

<tr v-for="data in ajaxDatas">
    <td>
        {{ f = formats.find(e => {
                return (e.shortEdge == data.height && e.longEdge == data.width) || (e.shortEdge == data.width && e.longEdge == data.height);
            }) }}
        {{ f ? f.label : 'Other format' }}
    </td>
</tr>

But this is actually printing me result of f in the HTML ... So i put it into an undisplayed html tag but it's make me think there's something better to do here...

Fab · Accepted Answer · 2019-04-02 09:01:53Z

1

Just create a method and use it in your template:

methods: {

  getFormat(width,height) {

    var f = this.formats.find( e => {

      return (e.shortEdge == height && e.longEdge == width) || (e.shortEdge == width && e.longEdge == height);

    });

    return f ? f.label : 'Other format'

  }

}

<tr v-for="data in ajaxDatas">
  <td>
      {{ getFormat(data.width,data.height) }}
  </td>
</tr>

answered Apr 2, 2019 at 9:01

Fab

4,6572 gold badges26 silver badges47 bronze badges

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

1 Comment

Simon Trichereau Over a year ago

Hmmm yes, it works, but as I have so many methods in my view I was looking for something more easy, and I think it could be great to declare variables in the vue template like twig does with set

ahmed waleed · Accepted Answer · 2019-04-02 09:19:32Z

0

Don't do this in template you can filter out your data in computed property then in v-for use that computed property.As a rule of thumb always keep your template as simple as possible and all the complex logic will go in script (methods, computed props or life cycle hooks).

answered Apr 2, 2019 at 9:19

ahmed waleed

5171 gold badge5 silver badges13 bronze badges

3 Comments

Simon Trichereau Over a year ago

how do you do a computed method depending on all the data that your ajax return?

ahmed waleed Over a year ago

Lets say you have some property which holds data once resolved from ajax response, in computed property you can apply any filtering logic on the props which holding data and return the filtered result additionally you can set computed property directly by using setter and on template side check if computed props has data eg: v-if="computedProps.length" then render it using v-for.

Simon Trichereau Over a year ago

Yeah, i see, but I need one property for each row i'll render, so i need as many computed as i have row in my table?

Simon Trichereau · Accepted Answer · 2019-07-12 14:08:54Z

0

I found a way from fabruex's answer, but directly in the template... It's not relative to VueJs, it's making a Self-Executing Anonymous Function...

Check this out :

<tr v-for="data in ajaxDatas">
    <td>
        {{
            ((h, w) => {
                var f = formats.find(e => {
                    return (e.shortEdge == h && e.longEdge == w) || (e.shortEdge == w && e.longEdge == h);
                });
                return f ? f.label : 'Other format'
            })(data.height, data.width)
        }}
    </td>
</tr>

answered Jul 12, 2019 at 14:08

Simon Trichereau

8091 gold badge12 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to make temporary variable in VueJs' templates?

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related