显示联系人详细信息页面的问题-Django和Vuejs

Question

我正在学习如何在django项目中使用vuejs(我没有使用DRF(，并且我在配置我的url以显示详细页面视图时遇到了问题。

到目前为止，我已经配置了urls.py，如下所示：

app_name = 'contacts'
urlpatterns = [
path('', views.contacts_all, name='contacts_all'),
path('<int:contact_id>/', views.contact_details, name='contact_details'),
]

此外，我有一个视图.py如下所示：

def contacts_all(request):
# Check if an Ajax Request
if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
contacts = list(Contact.objects.values())
return JsonResponse(contacts, safe=False, status=200)
return render(request, 'contacts/all-contacts.html')

def contact_details(request, contact_id):
contact_detail = get_object_or_404(Contact, id=contact_id)
context = {
'contact_detail': contact_detail
}
return render(request, 'contacts/contact-detail.html', context)

此外，我成功地从django服务器获取了所有联系人：

<script>
const app = new Vue({
delimiters: ['[[', ']]'],
el: '#contact-app',
data: {
contacts: [],
},

methods: {
// Get all contacts from server
async getContacts(){
const response = await axios({
url: 'http://127.0.0.1:8000/contacts/', 
method: 'get',
headers: {
'X-Requested-With': 'XMLHttpRequest'
}
}).then(response => {
console.log(response.data);
this.contacts = response.data
}).catch(err => {
console.log(err)
});
},
},
async created(){
await this.getContacts();
}
});
</script>

在模板中，我成功地显示了所有联系人的数据，如下所示：

<div class="flex-row-fluid ml-lg-8 d-block" id="contact-app">
<div class="card card-custom card-stretch">
<div class="card-body table-responsive px-0">
<div 
class="list list-hover min-w-500px"
data-inbox="list"
v-if="contacts.length"
>
<div 
class="d-flex align-items-start list-item card-spacer-x py-3"
data-inbox="message"
v-for="contact in contacts"
v-bind:key="contact.id"
>
<div class="d-flex align-items-center">
<div class="d-flex align-items-center flex-wrap w-xxl-200px mr-3" data-toggle="view">
<a
href="#" 
class="font-weight-bold text-dark-75 text-hover-primary">
[[ contact.name ]]
</a>
</div>
</div>
<div class="flex-grow-1 mt-2 mr-2" data-toggle="view">
<div>
<a href="{% url 'contacts:contact_details' contact.id %}"> 
<span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
<span class="text-muted mr-10">[[ contact.message.substring(0, 100) ]]</span>
</a>        
</div>
</div>
<div class="mt-2 mr-3 text-right" data-toggle="view">[[ contact.date_sent| fromNow ]]</div>
</div>
</div>
<div v-else>
<center>
<span>{% trans 'No contacts' %}</span>
<center>
</div>
</div>
</div>
</div>

我已将url配置为获取详细信息页面，但在获取详细信息页时出错未找到参数为"("，("的"contact_details"的Reverse。尝试了1个模式：['contacts/(？P<contact_id>[0-9]+(/\Z']

<div>
<a href="{% url 'contacts:contact_details' contact.id %}"> 
<span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
</div>

感谢您的帮助。

Answer 1

对于那些面临同样问题的人。我已经使用v-bind指令解决了这个问题。

发件人：

<div>
<a href="{% url 'contacts:contact_details' contact.id %}"> 
<span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
</div>

收件人：

<div>
<a v-bind:href="'http://127.0.0.1:8000/contacts/' + contact.id"> 
<span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
</div>