how to distribute pictures by writing one function?

Question

I am working on exchange rates. I have a list of currencies. Each currency has its own picture, its own numbers. And if these numbers have changed, then in this case the icon changes too, for example, there are three cases: if the currency has increased the up arrow, if the down arrow has gone down, if it has not changed, the dot icon.

Data comes from the backend. That is, I take all the data from via mapState and display it. And then I go through the loop through v-for and deduce the elements. So, I did all this as follows:

   <q-list>
        <div class="list-block" v-for="(item, index) in cashData.isNoCross" :key="index + '_exchangeRateList'">
          <q-item class="list-block__element">
            <q-item-section class="list-block__section">
             <img :src="`./statics/icons/currency-icons/${item.currency}.svg`" />
              <span class="indent-left">{{ item.currency }}</span>
            </q-item-section>
          </q-item>
 <q-item>
            <q-item-sectioт>
              <span class="title title--blue">{{ item.buyPrice }}</span>
              <img
                v-if="item.buyStatus != 'unchanged'"
                :src="`./statics/icons/currency-icons/arrow-${item.buyStatus === 'isUp' ? 'isUp' : 'isDown'}.svg`"
              />

              <img
                v-else
                :src="`./statics/icons/currency-icons/arrow-${
                  item.buyStatus === 'unchanged' ? 'unchanged' : 'unchanged'
                }.svg`"
              /> 
              <img
                src="../../statics/icons/currency-icons/arrow-isUp.svg"
              /> 
            </q-item-section>
          </q-item>
         </div>
         </q-list>

It all works great. But there is too much code, since I have to distribute the pictures in their places in other cases. Therefore, I was advised to write everything in one function, as here.

So I did like this:

       <q-item>
            <q-item-section>
              <span class="title title--blue">{{ item.buyPrice }}</span>
              <div v-for="(pic, index) in item.buyStatus" :key="index">
                <img :src="getImgUrl(pic)" />
              </div>
            </q-item-section>
          </q-item>
         ... 
  methods: {
getImgUrl(pic) {

  if (pic === "isUp") {
    return require("../../statics/icons/currency-icons/arrow-" + pic + ".svg");
  } else if (pic === "isDown") {
    return require("../../statics/icons/currency-icons/arrow-" + pic + ".svg");
  } else if (pic === 'unchanged') {
    return require("../../statics/icons/currency-icons/arrow-" + pic + ".svg");
  } else {
    return require("../../statics/icons/currency-icons/" + pic + ".svg");
  }
}

In the last check, I want pictures to be inserted, namely the flags of the countries of the corresponding currency.

I seem to understand what needs to be done, but I can’t understand at the same time. I would be grateful for any answers.

score 1 · Answer 1 · answered Jul 14 '20 at 02:34

It looks like that "pic" variable (item.buyStatus) can be used in the image url string rather than applying conditions to it and then adding it to the string based on those conditions.

Is this what you want?

<q-list>
  <div class="list-block" v-for="(item, index) in cashData.isNoCross" :key="item.currency">
    <q-item class="list-block__element">
      <q-item-section class="list-block__section">
        <img :src="`./statics/icons/currency-icons/${item.currency}.svg`" />
        <span class="indent-left">{{ item.currency }}</span>
      </q-item-section>
    </q-item>
    <q-item>
      <q-item-section>
        <span class="title title--blue">{{ item.buyPrice }}</span>
        <img :src="require(`./statics/icons/currency-icons/arrow-${item.buyStatus}.svg`)"/>
      </q-item-section>
    </q-item>
  </div>
</q-list>

how to distribute pictures by writing one function?

1 Answers1