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

Question

我觉得这是一个有点具体的问题，我在任何地方都找不到答案。也许 Vue.JS 中我遗漏了一些可以为我解决这个问题的东西。

我想创建一个小型单页应用程序，它可以使用参数动态更改屏幕。理论上，该应用程序应该是动态的，我应该能够在不接触 Vue.js 应用程序的情况下更新数据库。

我有一个小型 JSON 数据库，其中包含一系列信息。

["mary","john","alice"]

在使用生命周期挂钩的子组件上 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>

然而，我发现这不起作用，因为控制台 returns: {{ name }}.

如何将此类计算数据作为参数发送，以及如何将计算数据用于父组件来更改应用程序的屏幕？（比方说，我想用这个名字来查一个特定的人）。

Answer 1

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

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

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

How to send v-for computed data as parameter to function on Vue.js?

html

javascript

vue.js

vue-component