Vue - change/set a variable value in template

Question

Working in Vue, I am trying to set a variable based on another variable within the template. This is within a loop, and I need to set a value that can be used in 'next' iteration of the loop (to change the way a table is rendered, based on the variable).

I have the following:

<template>
...
<tbody v-for="(lo,index) in learn" :key="lo.id">
          <tr>
            <td colspan="2">LO{{index+1}} {{lo.attributes.field_lo}}</td>
            <td v-if="!nextDist">&nbsp;</td>
          </tr>
          <tr>
            <td>
              <div
                v-for="(pass,index) in lo.attributes.field_pass"
                :key="index"
              >P{{pStep()}} {{pass}}</div>
            </td>
            <td>
              <div
                v-for="(merit,index) in lo.attributes.field_merit"
                :key="index"
              >M{{mStep()}} {{merit}}</div>
            </td>
            <td v-if="lo.attributes.field_dshared && next" ***SET VALUE OF this.next*** rowspan="3">
              <span class="has-text-weight-bold">D{{dStep()}} </span>{{lo.attributes.field_dist}}
            </td>
            <td v-else-if="!lo.attributes.field_dshared" ***SET VALUE of this.next*** ><span class="has-text-weight-bold">D{{dStep()}} </span>{{lo.attributes.field_dist}}
            </td>
***else render nothing***
          </tr>
        </tbody>
</template>
export default {
  name: "SpecUnit",

  components: {
    EssentialContent
  },

  data() {
    return {
      unit: "",
      learn: "",
      nextDist: "",
      next: ""
    };
  },
...

}

What I'd like to be able to do is set the value of 'next' (this.next) so that when the loop iterates, I can check to see if I should which of the I should render or render nothing (because we are 'rowspanning').

I've tried computed and methods, but can't seem to get this working. I've looked to use Vue.set, but I'm struggling with that.

I'm still new to Vue, so any help would be greatly appreciated.

Thanks

IVO GELOV · Accepted Answer · 2020-06-13 15:26:42Z

2

It looks like Florian Reuschel had a similar problem and already solved it (although with some caveats)

Let's say we have something like that:

<!-- List.vue -->
<ul>
  <li v-for="id in users" :key="id">
    <img :src="getUserData(id).avatar"><br>
    🏷️ {{ getUserData(id).name }}<br>
    🔗 {{ getUserData(id).homepage }}
  </li>
</ul>

His approach is to use a helper renderless component with a scoped slot

const Pass = {
  render() {
    return this.$scopedSlots.default(this.$attrs)
  }
}

and then

<!-- List.vue -->
<ul>
  <Pass v-for="id in users" :key="id" :metadata="getUserData(id)">
    <li slot-scope="{ metadata }">
      <img :src="metadata.avatar"><br>
      🏷️ {{ metadata.name }}<br>
      🔗 {{ metadata.homepage }}
    </li>
  </Pass>
</ul>

If you take a look at the comments section on his blog article, you will see other approaches, too. For example, you can use an expression inside v-bind

<li v-for="id in users" :key="id" :demo="item = getUserData(id)">
    <img :src="item.avatar" /><br />
    🏷️ {{ item.name }}<br />
    🔗 {{ item.homepage }}
</li>

answered Jun 13, 2020 at 15:26

IVO GELOV

14.3k1 gold badge21 silver badges30 bronze badges

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

2 Comments

padavan Over a year ago

how is work for vue3 ? i got Property "item" was accessed during render but is not defined on instance.

IVO GELOV Over a year ago

Well, then define it - it's just a temp variable for this particular v-for.

Collectives™ on Stack Overflow

Vue - change/set a variable value in template

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related