Блог

Я хотел бы создать таблицу и заполнить ее данными, используя vue.js и v-для, но я не знаю, как получить доступ к вложенному файлу JSON.

Если я просто вызову {{элементы}}, данные будут представлены, но мне не удастся их отфильтровать

вот мой код:

     <template>
  <div id="app">
      <thead>
  
      </thead>
      <tbody>
<table>
      <thead>
        <tr>
          <th>id</th>
          <th>press</th>
          <th>date</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in items" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.results.downloadable.document_en }}</td>
          <td>{{ item.}}</td>
 
        </tr>
      </tbody>

    </table>
  
      </tbody>

 
  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items:[]
    }
  },


  created() {
    axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61amp;type=5`)


    .then(response => {
     
      this.items = response.data
    })
    
  }
}

</script>
 

В зависимости от результата вашей конечной точки вам следует изменить назначение элементов на

 .then(response => {
  this.items = response.data.results
})
 

И ваша петля, чтобы

 <tr v-for="item in items" :key="item.id">
  <td>{{ item.id }}</td>
  <!-- as downloadable is an array, see update below etc. -->
</tr>
 

Но имейте в виду — если вы назначите data.results напрямую, вы потеряете так называемую информацию о «пагинаторе», которая также содержит ссылку для дополнительной загрузки.

Таким образом, другим вариантом было бы назначить

 this.items = response.data
 

ОДНАКО имейте в виду, что затем вы должны определить элементы в своих данных как нулевой или пустой объект (не массив, так как это было бы ложно).

А затем измените свой цикл на что-то вроде этого (сейчас он зацикливается item.results ).

 <tbody v-if="items amp;amp; items.results">
 <tr v-for="item in items.results" :key="item.id">
  <td>{{ item.id }}</td>
  <!-- as downloadable is an array - see Update below etc. -->
 </tr>
</tbody>
 

Этот подход позволит вам показать общее количество items.count , например, с помощью

Обновить:

На самом деле downloadable это массив! Я могу только предположить, чего вы на самом деле хотите достичь здесь. Я создал jsfiddle, чтобы продемонстрировать его: https://jsfiddle.net/v73xe4m5/1/

Главное, что вы, вероятно, хотите сделать, это отфильтровать запись, чтобы показывать только записи, в которых downloadable содержится document_en.

       <tr v-for="item in items.results" :key="item.id">
        <td>{{ item.id }}</td>
        <td>
          <div class="downloads">
          <span
            v-for="downloadable in item.downloadable.filter(d => !!d.document_en)"
            :key="downloadable.id"
           >{{ downloadable.document_en.file }}</span>
           </div>
        </td>
      </tr>
 

Я не знаком с этой конечной точкой / api, поэтому я не знаю, может ли она возвращать более одного соответствующего документа на элемент.

Как вы можете видеть, я использовал второй цикл v-for внутри <td> , чтобы просмотреть все загружаемые записи. Перед этим они фильтруются, поэтому отображаются только записи, которые на самом деле имеют значение document_en. Вы можете адаптировать это так, как хотите.

Надеюсь, это поможет!

это правильная форма для получения массива из json и сохранения в этом.элементы

  this.items = response.data.results
 

Я призываю вас всегда сохранять console.log(ответ) после вызова api и получать доступ к данным в соответствии со структурой результатов api