如何正确使用 v-bind (vue.js)答案

【问题标题】：How to use v-bind properly (vue.js)如何正确使用 v-bind (vue.js)
【发布时间】：2019-06-21 12:06:45
【问题描述】：

我有一个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标签action = ""中正确使用['comment'] prop？

【问题讨论】：

标签： javascript html vue.js

【解决方案1】：

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

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

或者使用computed property 来获得更简洁的代码 v-bind:action="mycomputedProperty"

【讨论】：

【解决方案2】：

伊万回答的简写版本。

来自vue.js的参考docs

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

【讨论】：