我觉得这是一个有点具体的问题，我在任何地方都找不到答案。或许我对 Vue.JS 缺少一些可以为我解决这个问题的东西。
我想创建一个小型单页应用程序，它可以使用参数动态更改屏幕。理论上，该应用程序应该是动态的，我应该能够在不接触 Vue.js 应用程序的情况下更新数据库。
我有一个小型 JSON 数据库，其中包含一系列信息。
["mary","john","alice"]
在使用生命周期 Hook beforeMount() 的子组件上，我正在检索此信息并将其放入 Data 的数组中。
data() {
return {
names: [],
}
},
/*...*/
beforeMount() {
var namesDB = require('../assets/db/names.json');
this.names = names;
}
使用该数组，我正在创建一些按钮
<button v-for="name in names">{{ name }}</button>
这会为每个名称创建一个按钮，没有问题。
我现在要做的是能够将检索到的名称 ({{ name }}) 发送到方法上的函数。稍后的目的是将其发送到父应用程序以更改所需人员的屏幕，但现在，它很简单，如下所示:
methods: {
say(nameParam) {
console.log(nameParam);
},
},
我想做如下事情:
<button v-for="name in names" @click="say('{{ name }}')">{{ name }}</button>
但是，我发现这不起作用，因为控制台返回:{{ name }}。
如何将这种类型的计算数据作为参数发送，此外，如何使用父组件的计算数据来更改应用程序的屏幕？ (比如说，我想用这个名字来检查一个特定的人)。
最佳答案
您不在 Vue 的属性中使用内插值。点击处理程序被解释为 javascript 表达式，并且 name 在 v-for 的范围内，因此只需执行此操作即可。
<button v-for="name in names" @click="say(name)">{{ name }}</button>
关于javascript - 如何将 v-for 计算数据作为参数发送到 Vue.js 上运行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44170381/