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

Posted 2023-02-23

【中文标题】如何正确使用 v-bind (vue.js)

【英文标题】：How to use v-bind properly (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？

【参考方案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>