How to parse vk api wall.get data via vue?

Question

JavaScript

I receive data via https://vk.com/dev/wall.get
After I parse them like this:

<template>
  <div class="walls">
    <div class="loading" v-if="loading">
      Loading...
    </div>

    <div v-if="error" class="error">
      {{ error }}
    </div>
  <div class="album py-5 bg-light"  v-if="walls">
        <div class="container">
          <div class="row">
      
            <div class="col-md-4"  v-for="wall in walls">
              <div class="card mb-4 shadow-sm">			 
         
                <img v-if="wall.copy_history" class="card-img-top" style="height: 225px; width: 100%; display: block;" src="">                                  							
                <div class="card-body">					                 
          <a v-if="wall.attachments" :href="'https://vk.com/wall'+wall.owner_id +'_'+ wall.id">                   
          <p class="card-text">{{ wall.text }}</p>				  				   				   
          </a>
          <a v-else-if="wall.copy_history" :href="'https://vk.com/wall'+wall.copy_history[0].owner_id +'_'+ wall.copy_history[0].id">                                     
          <p class="card-text">{{wall.copy_history[0].text}}</p>				  				   
          </a>
          <a v-else :href="'https://vk.com/wall'+wall.owner_id +'_'+ wall.id">                   
          <p class="card-text">{{ wall.text }}</p>				  				   				   
          </a>
                  <div class="d-flex justify-content-between align-items-center">      
                    <small class="text-muted">{{ wall.id }}</small> 
                  </div>
                </div>
              </div>
            </div>     
      
          </div>		  
        </div>
  </div>
  
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      loading: false,
      walls: null,
      error: null,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.error = this.walls = null;
      this.loading = true;
      axios
        .get('/api/walls')
        .then(response => {			 	 
      this.loading = false;
      this.walls = response.data.items;
    }).catch(error => {
      this.loading = false;
      this.error = error.response.data.message || error.message;
    });
    }
  }
}
</script>

You need to get an image if it exists from the original data, if the current post is a repost, and if the current post is an original, check for the presence of the image in

attachments

and, if present, remove it.

I broke my head ... Tell me ..

Answer 1

No need to implement data logic in the template - you need to pass data for display.
The template should display data - in its scope to know HOW to display, not WHAT to display.
This should not be:

<a v-else :href="'https://vk.com/wall'+wall.owner_id +'_'+ wall.id">

The template becomes significantly smaller:

<template>
  <div class="walls">
    <div class="loading" v-if="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div class="album py-5 bg-light" v-if="walls">
      <div class="container">
        <div class="row">
          <div class="col-md-4" v-for="({ href, id, img, text }, index) in list" :key="index">
            <div class="card mb-4 shadow-sm">			 
              <img v-if="img" class="card-img-top" style="height: 225px; width: 100%; display: block;" :src="img">                
              <div class="card-body">
                <a :href="href">
                  <p class="card-text">{{ text }}</p>				  				   				   
                </a>
                <div class="d-flex justify-content-between align-items-center">      
                  <small class="text-muted">{{ id }}</small> 
                </div>
              </div>
            </div>
          </div>
        </div>		  
      </div>
    </div>
  </div>
</template>

We transfer the logic to the component code:

<script>
import axios from 'axios';

const getUrl = (a, b, URL = 'https://vk.com/wall') => `${URL}${a}_${b}`;

export default {
  data: () => ({
    loading: false,
    walls: null,
    error: null,
  }),

  computed: {
    list() {
      const { walls } = this;
      if (!walls) return [];

      return walls.map((wall) => {
        const { copy_history } = wall;
        const { attachments, id, owner_id, text } = copy_history && copy_history[0] ? copy_history[0] : wall;
        const href = getUrl(owner_id, id);
        const { photo } = (attachments || []).find(({ type }) => type === 'photo');
        const img = photo ? photo.photo_1280 : false;
        return { href, img, text, id: wall.id };
      };
    },
  },

  created() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      this.error = this.walls = null;
      this.loading = true;
      try {
        const { data } = await axios.get('/api/walls');
        this.walls = data.items;
      } catch (error) {
        this.error = error.response.data.message || error.message;
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>