I've no idea how to get the id of element in order to send it. I use Vue 2.
** offers array i get from the API, so it is just an example.
I need getting id dynamically in order to send a comment for the exact offer.
Maybe it is the wrong way to do it, but it would be great if it worked this way
HTML:
<div v-for="offer in offers">
<p> {{ offer.description }}</p>
<div class="form-group col-md-9">
<b-form-textarea :id="`${offer.id}`" placeholder="Comment!" rows="1" v-model="text"></b-form-textarea>
<button @click="createComment()" class="button btn btn-success">Send!</button>
</div>
</div>
JS:
data () {
return {
offers: [
{id: 1,
description: "some"
},
{id: 2,
description: "another"
},
],
}
},
methods: {
createComment() {
const FormData = {
text: this.text,
offer_related: NEED TO GET THE VALUE OF TEXTAREA :id here
}
// axios
// .post(`/api/v1/comments/`, FormData)
},
Great thanks to @don_aman!
The final code will look like:
<div v-for="offer in offers">
<p> {{ offer.description }}</p>
<div class="form-group col-md-9">
<b-form-textarea :id="`${offer.id}`" placeholder="Comment!" rows="1" v-model="text[offer.id]"></b-form-textarea>
<button @click="createComment(`${offer.id}`)" class="button btn btn-success">Send!</button>
</div>
</div>
JS:
data () {
return {
offers: [
{id: 1,
description: "some"
},
{id: 2,
description: "another"
},
],
text: {},
}
},
methods: {
createComment(id) {
const FormData = {
text: this.text[id],
offer_related:id,
}
axios
.post(`/api/v1/comments/`, FormData)
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.