htmlをVue.js側でループさせたい。(主にjavaScript)

Question

前提
vue-cliでのプロジェクト作成

htmlでbackground-imageの上にbuttonと文字を表示させています
だたこれだとvue.jsを生かせていないので

   <div class="hoge">
-    <ul class="hoge_scroll_lst">
-      <li class="backgroundimage">
-        <router-link to="/hoge1" tag="button">
-          <img class="button" src="image1"><br>
-        </router-link>
-      </li>
-      <li class="backgroundimage">
-        <router-link to="/hoge2" tag="button">
-          <img class="button" src="image2"><br>
-        </router-link>
-      </li>
-      <li class="backgroundimage">
-        <router-link to="/hoge3" tag="button">
-          <img class="button" src="image2"><br>
-        </router-link>
-      </li>
-      <li class="backgroundimage">
-        <router-link to="/hoge4" tag="button">
-          <img class="button" src="image4"><br>
-        </router-link>
-      </li>
-      <li class="backgroundimage">
-        <router-link to="/hoge5" tag="button">
-          <img class="button" src="image5"><br>
-        </router-link>
-      </li>-    ........

以下のように試しましたが別々にループがうまくできません、ご教授お願いいたします。

    <img class="list_Position" v-for="image in images" :src="image.url" :alt="image.alt" />

export default {
  data () {
    return {
      images: this.createImages()
    };
  },
  methods: {
    createImages () {
      let images = [];
      let base = [
        {
          url: '/static/hoge/btn-main_contents.png',
          alt: 'p1'
        }];
      for (let loop = 0; loop < 6; loop++) {
        images = images.concat(base);
      }
      return images;
    }
  }
};

Comments

[syumai]

別々にループとは、別々のリンク・画像に対してのループと言う事でしょうか？

[harunasan]

説明不足ですいません。ボタン背景イメージのみループで上の画像文字とリンクは別々です。

Answer 1

router-link, imageのデータをそれぞれ別に指定する必要があるようなので、
こちらのデータを先に用意して、liごとループするのではいかがでしょうか？

JSFiddleのサンプル

<div class="hoge">
  <ul class="hoge_scroll_lst">
    <li class="backgroundimage" v-for="({ image, link }) in dataList">
      <router-link :to="link" tag="button">
        <img class="button" :src="image.url" :alt="image.alt">
        <br>
      </router-link>
    </li>
  </ul>
</div>

const dataList = [];
for (let i = 1; i <= 6; i++) {
  dataList.push({
    image: {
      url: '/static/hoge/btn-main_contents.png',
      alt: `p${i}`
    },
    link: `/hoge${i}`
  });
}

export default {
  data() {
    return {
      dataList,
    };
  },
};

Comments

[harunasan]

解決しました、ありがとうございます！