Question

我最近开始使用Vue Js，现在我无法将vue模型值传递给方法函数。

<div v-for="(post, index) in posts" :key="post.customerName">
   <input type="text" v-model="post.customerName" /> /** successfully print customerName inside this field**/

   <b-button block pill variant="outline-info" v-on:click="bookerName()">
       {{post.customerName}}
   </b-button>
</div>

方法功能

bookerName(){
console.log(this.post.customerName); /** prints out UNDEFINED **/
}

VUE数据返回

posts:{
  customerName:{ 'David','John','Sam'},
},

bookerName: ''

Answer 1

将索引从v-for传递到方法，然后按索引获取值：

<b-button v-on:click="bookerName(index)">
...

bookerName (index){
  console.log(this.posts[index])
}

此外，在您的示例中，您有bookerName: ''。它是data()中的属性吗？如果是这样，则不能使用具有相同名称bookerName

的方法

有没有一种方法可以将vue模型值传递给方法函数？

1 个答案: