Problem to show contact detail page - Django and Vuejs - django

Question

I'm trying to learn how to use vuejs in a django project (i'm not using DRF) and I'm having trouble configuring my url to display a detail page view.
So far i have configured urls.py like shown below:
app_name = 'contacts'
urlpatterns = [
path('', views.contacts_all, name='contacts_all'),
path('<int:contact_id>/', views.contact_details, name='contact_details'),
]
Also i have a views.py like shown below:
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)
Also i successfully getting all contacts from django server:
<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>
And in template i'm successfully showing all contacts data like shown below:
<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>
I have configured url to get details page but i got an error in getting detail page Reverse for 'contact_details' with arguments '('',)' not found. 1 pattern(s) tried: ['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>
Appreciate any help.

Answer 1

For those who face the same problem. I've managed to solve it by using v-bind directive.
From:
<div>
<a href="{% url 'contacts:contact_details' contact.id %}">
<span class="font-weight-bolder font-size-lg mr-2">[[ contact.subject ]] -</span>
</div>
To:
<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>