javascript - 如何将 v-for 计算数据作为参数发送到 Vue.js 上运行？

Question

我觉得这是一个有点具体的问题，我在任何地方都找不到答案。或许我对 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 }}。

如何将这种类型的计算数据作为参数发送，此外，如何使用父组件的计算数据来更改应用程序的屏幕？ (比如说，我想用这个名字来检查一个特定的人)。

Answer 1

您不在 Vue 的属性中使用内插值。点击处理程序被解释为 javascript 表达式，并且 name 在 v-for 的范围内，因此只需执行此操作即可。

<button v-for="name in names" @click="say(name)">{{ name }}</button>