как раздавать картинки написав одну функцию? - PullRequest
Новая
       60

как раздавать картинки написав одну функцию?

0 голосов
/ 14 июля 2020

Я работаю над курсами обмена. У меня есть список валют. У каждой валюты своя картинка, свои числа. И если эти числа изменились, то в этом случае меняется и значок, например, есть три случая: если валюта увеличила стрелку вверх, если стрелка вниз опустилась вниз, если не изменилась, значок точки .

Данные поступают из серверной части. То есть я беру все данные через mapState и отображаю их. И затем я go через l oop через v-for и выводю элементы. Итак, я сделал все это следующим образом: 

   <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>

Все отлично работает. Но кода слишком много, так как в других случаях мне приходится раскладывать картинки на свои места. Поэтому мне посоветовали записать все в одной функции, как здесь .

Так я и сделал: 

       <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");
  }
}

В последней проверке мне нужны картинки должны быть вставлены, а именно флаги стран соответствующей валюты.

Я вроде понимаю, что нужно делать, но при этом не могу понять. Буду признателен за любые ответы.

1 Ответ

1 голос
/ 14 июля 2020

Похоже, что переменную «pi c» (item.buyStatus) можно использовать в строке URL-адреса изображения вместо того, чтобы применять к ней условия и затем добавлять ее в строку на основе этих условий.

Это то, что вы хотите? 

<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>
...