Как добавить дополнительный URL в Vue JS - PullRequest
Новая
       15

Как добавить дополнительный URL в Vue JS

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

Привет, я использую django и Vue для создания веб-приложения. Я визуализирую данные с помощью v-for и получаю данные из спокойного API с помощью XMLHttprequest

Это мой собственный файл js. Я не использую Vue CLI. Я использую CDN: 

$(document).ready(function () {

    function fetchData(){
      Vue.component('postcontainer', {
        props:['obj'],
        template:
        `<div>
        <div v-for="data in obj" class="ui mt-3 card">
        <div class="content">
          <div class="right floated meta">{{data.date_posted}}</div>
          <img class="ui avatar image" src="https://cdn.pixabay.com/photo/2017/08/30/12/45/girl-2696947_960_720.jpg">
          {{data.author}}
        </div>
        <div v-if="data.image" class="image">
          <img v-bind:src="[[data.image]]">
        </div>
        <div v-if="data.video">
          <video controls v-bind:src="[[data.video]]" class="embed-responsive"></video>
        </div>
        <div class="content">
          <div v-if="data.title">
            <a class="text-dark" :href="data.id"><h3 class="header">{{data.title}}</h3></a>
          </div>
          <div class="description my-2">
            <div v-if="data.caption">
              <a class="text-dark" :href="data.id"><p>{{data.caption}}</p></a>
            </div>
          </div>    
        </div>
        <div class="extra content">
        <span class="right floated">
        <i class="heart outline like icon"></i>
        17 likes
      </span>
      <a :href="data.id"><i class="comment icon"></i></a>
  </div>
      </div> 
        </div>
        `
      })
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
          if (this.readyState == 4 && this.status == 200) {
            
            var app = new Vue({
              el: '#postCard',
              component:['postconatiner'],
              
              data: {
                obj: JSON.parse(this.responseText),
              }
   
            })
          }
        }
        xhr.open('GET', '/data/', true);
   
        

        xhr.LOADING
        xhr.send()
      }
   
      fetchData()
 
});

Я хочу добавить дополнительный URL-адрес перед примером data.id - ": href = 'detail / data.id'". Моя проблема в том, что когда я пытаюсь добавить это, URL-адрес становится localhost: 8000 / NaN. Пожалуйста, помогите мне. Также я хочу узнать, правильно ли это сделать html с помощью VueJS.

1 Ответ

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

Используйте связанное свойство href следующим образом: 

:href="'details/'+data.id"
...