How to use v-bind properly (vue.js)

Question

I have a Vue.component which creates a row in a table:

 Vue.component('comment-row', {
                props: ['comment'],
                template: '<tr>' +
                    '<th>{{comment.authorName}}</th>' +   // works fine
                    '<th>{{comment.value}}</th>' +  // also works fine
                    '<th><form action="/remove_comment/{{comment.id}}">' +  // problem here
                    '<button type="submit">X</button></form></th>' +
                    '</tr>'
            });

The row looks like:

Author | Some message | Button 'X' to delete this row with unique action

And there is a problem here: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

Ok, we do what we are asked:

<form v-bind:action="/remove_comment/comment.id">

But here another problem arises: Invalid regular expression flags in

Instead of a number I get string comment.id

The question is how to use ['comment'] prop correctly in a html tag action = "" in Vue.js?

tony19 · Accepted Answer · 2022-07-16 01:24:20Z

1

You can use v-bind like this:

<form v-bind:action="'/remove_comment/' + comment.id"></form>

Or use a computed property for cleaner code v-bind:action="mycomputedProperty"

edited Jul 16, 2022 at 1:24

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jan 28, 2019 at 13:18

Iwan Wijaya

2,1571 gold badge16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 01:06:52Z

1

Shorthand Version of Iwan's Answer.

Reference from vue.js docs

<form :action="'/remove_comment/' + comment.id"></form>

edited Jul 16, 2022 at 1:06

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 26, 2020 at 21:49

Jack Bou3r

112 bronze badges

Collectives™ on Stack Overflow

How to use v-bind properly (vue.js)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related