Question

我有一个Vue.component，它在表中创建一行：

 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>'
            });

该行如下所示：

作者|一些消息|按钮“ X”可通过独特的操作删除该行

这里有一个问题： Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

好吧，我们按要求做：

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

但是这里出现另一个问题： Invalid regular expression flags in

我得到一个字符串comment.id

，而不是数字

问题是如何在Vue.js的html标签['comment']中正确使用action = "" prop？

Answer 1

Iwan答案的简写版本。

vue.js docs的引用

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

Answer 2

您可以像这样使用v-bind：

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

或使用computed property获得更清晰的代码 v-bind:action="mycomputedProperty"

如何正确使用v-bind（vue.js）

2 个答案: