Блог

Я начинаю изучать vue, я пытался немного попрактиковаться, и я застрял с циклами for.

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

 [
    {
        "_id": "ID1",
        "customerID": "ASDF",
        "purchases": [
            {
                "laptop": "DELL",
                "price": "500"
            },
            {
                "monitor": "DELL",
                "price": "200"
            }
        ]
    },
    {
        "_id": "ID2",
        "customerID": "FDSA",
        "purchases": [
            {
                "laptop": "MacBook",
                "price": "1800"
            },
            {
                "monitor": "DELL",
                "price": "300"
            }
        ]
    }
]
  

Моя цель — использовать v-for для просмотра массива покупок, чтобы он мог отображать содержимое массива для каждой записи в json.

Шаблон vue, который я использую, является:

 <template>
  <div>
    <div class="card" v-for="data in purchases" :key="data.purchases">
        <div class="card-image">
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4">PURCHASES</p>
                <div
                  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
                >
                  <div class="column">Laptop: {{data.purchases[0].laptop}}</div>
                  <div class="column">Monitor: {{data.purchases[0].monitor}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>
  

Скрипт в файле vue:

 <script>
import { ref } from "@vue/composition-api";

export default {
  setup() {
    const purchases = ref([]);
    const API_url = "http://localhost:8383/purchases";

    async function getData() {
      const reponse = await fetch(API_url);
      const json = await reponse.json();
      purchases.value = json;
      console.log(purchases);
    }

    getData();

    return {
      purchases,
    };
  },
};
</script>
  

Я знаю, что показываю только первый элемент массива, и это именно мой вопрос, как я могу просмотреть весь массив с помощью v-for.

Я был бы очень признателен за помощь 🙂

Создайте другой вложенный, v-for чтобы выполнить цикл data.purchases :

 <template>
  <div>
    <div class="card" v-for="data in purchases" :key="data.purchases">
        <div class="card-image">
          <div class="card-content">
            <div class="media">
              <div class="media-content">
                <p class="title is-4">PURCHASES</p>
                <div
                  class="columns is-variable is-1-mobile is-0-tablet is-3-desktop is-8-widescreen is-2-fullhd"
                >
                <template v-for="purchase  in data.purchases">
                  <div class="column">Laptop: {{purchase.laptop}}</div>
                  <div class="column">Monitor: {{purchase.monitor}}</div>
               </template>
                </div>
              </div>
            </div>
          </div>
        </div>
    </div>
  </div>
</template>