Welcome to Vue Discussions! #5902

bash npm Create a new Vue.js project**: bash vue create stencils-of-the-streets 3. **Navigate to your project directory**: bash cd stencils-of-the-streets ``` ###

CarterLi · 2022-05-12T11:14:50Z

CarterLi
May 12, 2022

Suggestion: Make .vue more expressive

Say I want to join two lists ( fooList and barList ) in vue template

Currently we can only write

<ul>
  <li v-for="foo of fooList" :key="foo.fooId">
    <li v-text="foo.num" />
    <li v-text="foo.text" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).num" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).text" />
    <li v-text="barList.find(bar => bar.barId === foo.barId).text2" />
  </li>
</ul>

barList.find() is in v-for, so computed won't work here. Moving them into a new component works but that's a new topic.

In JSX we can write

<ul>
{
  fooList.map(foo => {
    const bar = barList.find(bar => bar.barId === foo.barId);
    return [
      <li v-text={foo.num} />
      <li v-text={foo.text} />
      <li v-text={bar.num} />
      <li v-text={bar.text} />
      <li v-text={bar.text2} />
    ];
  })
}
</ul>

If we can create new variables in Vue template like what we can do in JSX, we can write

<ul>
  <li v-for="foo of fooList" :key="foo.fooId">
    <script type="a special tag indicates that this script is inlined into generated component code">
      const bar = barList.find(bar => bar.barId === foo.barId);
    </script>
    <li v-text="foo.num" />
    <li v-text="foo.text" />
    <li v-text="bar.num" />
    <li v-text="bar.text" />
    <li v-text="bar.text2" />
  </li>
</ul>

It's not only cleaner, but also more efficient.

6 replies

CarterLi May 12, 2022

Move complex code into other place doesnt mean the whole code is simplified.

3 lines VS 11 lines addition, which one is more complex?

Welcome to Vue Discussions! #5902

Uh oh!

yyx990803 May 12, 2022 Maintainer