Question

嗨，我正在使用django和Vue制作一个Web应用程序。我正在使用v-for渲染数据，并使用XMLHttprequest从一个宁静的API获取数据

这是我的自定义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()
 
});

我想在data.id示例之前添加一个附加的URL-“：href ='detail / data.id'”。我的问题是，当我尝试添加此网址时，其网址为“ localhost：8000 / NaN”。请一些帮助我。我也想知道这是否是使用VueJS呈现html的正确方法。

Answer 1

像这样使用绑定的属性href：

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

如何在Vue JS中添加其他URL

1 个答案: