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:
JavaScript
x
10
10
1
<div v-for="offer in offers">
2
<p> {{ offer.description }}</p>
3
4
<div class="form-group col-md-9">
5
<b-form-textarea :id="`${offer.id}`" placeholder="Comment!" rows="1" v-model="text"></b-form-textarea>
6
<button @click="createComment()" class="button btn btn-success">Send!</button>
7
</div>
8
9
</div>
10
JS:
JavaScript
1
26
26
1
data () {
2
return {
3
offers: [
4
{id: 1,
5
description: "some"
6
},
7
{id: 2,
8
description: "another"
9
},
10
],
11
}
12
},
13
14
15
methods: {
16
createComment() {
17
const FormData = {
18
text: this.text,
19
offer_related: NEED TO GET THE VALUE OF TEXTAREA :id here
20
}
21
// axios
22
// .post(`/api/v1/comments/`, FormData)
23
},
24
25
26
Advertisement
Answer
Great thanks to @don_aman!
The final code will look like:
JavaScript
1
10
10
1
<div v-for="offer in offers">
2
<p> {{ offer.description }}</p>
3
4
<div class="form-group col-md-9">
5
<b-form-textarea :id="`${offer.id}`" placeholder="Comment!" rows="1" v-model="text[offer.id]"></b-form-textarea>
6
<button @click="createComment(`${offer.id}`)" class="button btn btn-success">Send!</button>
7
</div>
8
9
</div>
10
JS:
JavaScript
1
25
25
1
data () {
2
return {
3
offers: [
4
{id: 1,
5
description: "some"
6
},
7
{id: 2,
8
description: "another"
9
},
10
],
11
text: {},
12
}
13
},
14
15
16
methods: {
17
createComment(id) {
18
const FormData = {
19
text: this.text[id],
20
offer_related:id,
21
}
22
axios
23
.post(`/api/v1/comments/`, FormData)
24
},
25