如何将Vue的v-for中的参数发送给函数？
在Vue的v-for指令中，可以通过使用v-bind指令将参数绑定到元素的属性上，然后在函数中通过事件对象来获取这个参数。
具体步骤如下：
- 在v-for指令中，使用v-bind指令将参数绑定到元素的属性上。例如，假设v-for遍历一个数组items，可以将参数item绑定到元素的data属性上：
<div v-for="item in items" v-bind:data="item" @click="myFunction">
{{ item }}
</div>- 在函数中，通过事件对象来获取这个参数。在Vue的事件处理函数中，事件对象会作为第一个参数传递给函数。可以通过事件对象的target属性来获取被点击的元素，然后再获取绑定的参数。例如，可以在myFunction函数中获取绑定的参数：
methods: {
myFunction(event) {
const item = event.target.getAttribute('data');
console.log(item);
}
}这样，当点击v-for遍历的元素时，myFunction函数会被调用，并且可以获取到绑定的参数item。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）
腾讯云云服务器（Cloud Virtual Machine，CVM）是腾讯云提供的弹性计算服务，为用户提供可扩展的云端计算能力。您可以根据业务需求选择不同配置的云服务器实例，支持多种操作系统，提供高性能的计算、存储和网络能力。
产品介绍链接地址：腾讯云云服务器
相关·内容
4回答
我正在以2018-08-08 15:38:48格式从我的数据库中接收日期，但是我希望它能显示3:38 pm。
我只是不确定什么时候做这个改变，我可以在它被张贴的时候改变它吗？它们是发送给某人的消息的日期。
当前代码：
<div v-for="messages in userMessages">
<div class="date">
{{ user.created_at }}
</div>
</div>
输出：
2018-08-08 15:38:48
如何在vue中转换日期？(当它处于v-f
浏览 1提问于2018-08-10得票数 2
如何将child component中类型复选框的输入绑定到parent component上的v-model上
所需的组件方式-
父母-
<button v-if="checkedNames">Confirm</button> //show this button if 1 checkbox is selected
<div v-model="checkedNames" >
<child-component v-for="person in collection" :key="person.i
浏览 3提问于2021-09-07得票数 1
回答已采纳
2回答
我需要能够获取id才能发出api请求。目前，我已经尝试了以下方法，但每当我运行此命令时，整个页面都无法引导。如果我删除了<a v-on:click="showRecipe({{inf.Id}})">Recipe</a>，它就会重新开始工作。
如何将id插入到v-for循环中的函数中？
<tr v-for="inf in info" :key="inf.Id" scope="row">
<td>{{inf.Id}}</td>
<td>{{inf.
浏览 33提问于2020-06-05得票数 0
回答已采纳
1回答
如何将Vue组件中的值searchString绑定到该组件使用的html模板中的item值？我想将这个值发送到我在Ajax调用中调用的方法。
Vue：
Vue.component('user-container-component', {
props: {
prop: null
},
template: '#user-container-template',
data: function () {
return {
open: false,
searc
浏览 3提问于2017-10-24得票数 0
回答已采纳
1回答
如何在vue.js中循环使用给定输入参数的过滤列表？
请给我。考虑到许多记录都应该避免像<li v-for="x in todos_filtered" v-if="x.person == 'Mike'">这样的过滤。
这里，返回一个空列表而不是2个元素的代码。
<html>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<body>
<div id="
浏览 5提问于2022-03-29得票数 0
回答已采纳
1回答
伙计们，我是Vue的新手，我找到了很多解决方案，但似乎没有一个适合我的情况。我正在使用Vue-select (sagalbot )，下面是我的代码-这里是我的代码
<v-select v-model="productvalue" multiple label="category_desc" :options="options1" :on-change="onChange" ></v-select>
<div class="input-group" v-for=
浏览 0提问于2018-03-23得票数 0
回答已采纳
1回答
所以我在我的项目中使用了Vue.js，我遇到了一个问题:如何动态地绑定v-for的过滤器？在某个时候，我将元素的id传递给vue方法，然后如何将其放入v-for item in items | filterBy @{id} in 'id'？
我尝试过将'v-for‘属性放在JQuery 'attr’中，但这似乎行不通。我认为应该在这里使用Vue.filter或vm.$set，但是我还没有搞清楚什么。
会感谢任何可能的帮助！
例如：
var vm = new Vue({
...
methods: {
bindId: function(id) { /
浏览 2提问于2016-04-18得票数 0
回答已采纳
5回答
在v-for循环中显示数组之前，如何按名称或性别对数组进行排序？
<div id="string">
<ul>
<li v-for="array in arrays">{{ array.name }}</li>
</ul>
</div>
// Vue.js v. 2.1.8
var string = new Vue({
el: '#string',
data: {
arrays: [
{ name: 'kano',
浏览 4提问于2017-03-19得票数 57
回答已采纳
如何将数据从Laravel传递到Vue.js组件v？
我尝试了以下代码：
<my-component
v-for="(event, eventIndex) in {{ $data['events'] }}">
</my-component>
但它会返回：
使用v-for呈现的组件列表应该有显式的键。
浏览 0提问于2018-03-01得票数 0
回答已采纳
2回答
如何将数据从Vue实例传递给Vue组件？我试图在我的组件模板中的'li‘上做'v-for’，这是
HTML
<div id="app">
<my-notification></my-notification>
</div>
<template id="my-template">
<ul>
<li v-for="nn in notifications">{{ nn }}</li>
</ul&
浏览 6提问于2016-10-18得票数 0
回答已采纳
3回答
如何将数据发送到Vue.js中的组件？我在单击事件按钮上得到了来自服务器的响应，现在我希望将这个响应发送到组件，并使用v-for在v-for上显示。
这是我的代码：
var store = new Vuex.Store({
state: {
Item: []
},
mutations: {
getItems: function (state) {
}
},
actions: {
fetchData:function (context) {
Vue.http.get(
浏览 4提问于2017-09-03得票数 0
回答已采纳
这是我的JS代码： Vue.component('card-stack', {
props: ['course'],
template: `
<h3 class="course-card__title">
{{ course.title }}
</h3>
`
})
new Vue({
el: '#app',
data: {
courses: [
{ title: 'sometext' }
]
浏览 11提问于2020-09-05得票数 1
我正在尝试用Vue发送GET请求，而不是用POSTMAN发送给我的小学习项目。我有这个代码来处理：
<tr v-for="(cabinet, i) in cabinets">
<td>{{ cabinet }}</td>
</tr>
<script>
const axios = require('axios');
export default {
name: "Cabinets",
data() {
return {
cabine
浏览 9提问于2019-07-26得票数 0
回答已采纳
我在groupData中有一个json数组，如何将数据传递给v-select
我知道在v-select中使用v-是错误的，但我不确定如何传递数据：
<v-select multiple
v-for="group in groupsData"
:value.sync="selected"
:options="[{label: group.group_name, value: group.id}]">
</v-select>
插件网址：
这是如何在没有v-select插件的vue.js中实现的，它是这样工作的：
&
浏览 19提问于2017-07-07得票数 1
回答已采纳
0回答
我在学VueJs。我做了一个简单的项目，你可以在这里看到：
var vuePosts = new Vue({
el: '#vue-posts',
data: {
posts: [
{title: 'title 1', body: 'message 1'},
{title: 'title 2', body: 'message 2'}
]
}
})
<script src="https://unpkg.com/vue/dist/vue.js"
浏览 2提问于2017-01-05得票数 3
回答已采纳
这是一个简单的vue演示：
<body>
<div id="app">
<ul>
<li v-for="text,i in todoList" v-on:click="method_1(i)" >{{text}}</li>
</ul>
<ul>
<li v-for="text,i in todoList" v-on:click="method_2" >{{text}
浏览 3提问于2018-05-05得票数 8
回答已采纳
我有这个vue，它使用v-for呈现一个水果列表。当我鼠标移动时，css类hovering将应用于所有项，而不仅仅是一个项。如何将其修正为css类hovering，以便仅应用于我鼠标控制的项？
new Vue({
el: '#app',
data: {
fruits: ['apple','kiwi', 'orange'],
isHovering: false
}
})
.hovering{
color: red
}
<script src="https://cdnjs.cloudf
浏览 2提问于2020-12-18得票数 3
回答已采纳
在Vue 1.x中学习关于的教程时，作者在一个v-for指令中使用了多个过滤器。
<ul v-for="post in posts | filterBy nameFilter in 'name' | filterBy catFilter in 'cat'"></ul>
据我从所知，这个语法不再在Vue 2.0中使用，我试图将这一行代码重写为
<ul v-for="post in nameFilter | catFilter"></ul>
我还创建了两个计算函数nameFilter和c
浏览 2提问于2017-10-27得票数 0
我试图用v-for呈现一个包含20行和5列的简单表，但我遇到了问题。我的代码：
<tr v-for="row in totalRows" :key="row">
<td v-for="col in totalColumns" :key="col">
{{ getTableNum() }}
</td>
</tr>
在数据方面：
totalColumns: 5,
totalRows: 20,
numberCount: 0,
方法：
getTableNum(
浏览 2提问于2021-07-06得票数 0
回答已采纳
2回答
我在理解如何在Laravel中将Vue变量与Blade模板相结合时遇到了麻烦。
这是可行的：
<ul id="media" v-if="files !== null">
<li v-for="item in files">
@{{ item.file }}
</li>
</ul>
这不起作用：
<ul id="media" v-if="files !== null">
<li v-for="item i
浏览 0提问于2019-03-16得票数 0
1回答
我有这样的模板
<template>
<div>
<div id="hiddenElement">
<MyElement v-for='...' @click="...">
</MyElement>
</div>
<div id="appendElementsHere" />
</div<
</template>
用户可以将元素附加到列表中，所以我有一些类似如下的函数：
someFunc(){
浏览 4提问于2019-10-24得票数 3
回答已采纳
这段代码：
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact(1)">
在Vue js中运行良好。
但这一点：
<tbody v-for="contact in contacts">
<tr v-on:click="selectContact({{contact.index}})">
似乎不太管用。导致错误。那么如何将像contact.index这样的环境变量传递到事件方法中呢？
浏览 32提问于2017-01-19得票数 0
回答已采纳
我从vue发送了一个post请求，vue表单是用v-for循环创建的，因为它是一个数据对象数组。在数据对象中，有另一组具有字段的对象。如何设置数据结构？由于for循环创建了多个对象，我如何将带有id的数据传递到vue数据结构中？感谢这里的任何帮助！谢谢! <div v-for="(list, index) in lists.items" :key="list.id">
<div class="card">
<div class="card-header">
浏览 35提问于2019-01-29得票数 1
回答已采纳
我有一个充满选项的datalist，以及一个链接到该数据列表的输入。当用户做出选择时，我使用v模型将该值发送给Vue实例数据变量，但是，一旦我单击一个选项，因为双向绑定，它将清除所有其他选项。是否有一种方法只获取值，但没有清除所有其他选项后的选择。
示例代码：
<datalist id='list'>
<option v-for='item in arrayOfObjects' :value='item'>
</datalist>
</div>
</div>
Vue实例：
浏览 4提问于2018-10-18得票数 0
回答已采纳
我正在用vue创建一个电影院座椅平面设计，我很难做出座椅的布局。 我的vue组件中包含以下内容： <div class="row" v-for="(item,index) in seatRows" :key="index">
<div v-for="(rows,i) in item" :key="i" :id="rows.Row">
<input type="checkbox">
</div>
浏览 5提问于2019-10-03得票数 1
我正在构建(作为练习) vue.js 2中的购物车。我将我的商店商品和订单商品存储在vue数据数组中，并在for each商店商品的循环中呈现一个按钮，以便将商品添加到订单中(例如：推送)。
下面这段代码将我的商店数组中的商品列表保存在我的vue数据中：
<fieldset>
<legend>Shop</legend>
<section v-if="shop">
<article v-for="(item, index) in shop">
<
浏览 0提问于2017-03-21得票数 4
我有一些带有v-for语句的bootstrap vue卡，我的一个标记根据v-for的当前迭代返回值。我想将这个值传递给另一个标记，如果我在传递它之前将其保存为变量，那么所有迭代都会共享相同的变量，但我不希望这样。
<b-card-group v-for="(element, i) in array" :key="index">
<b-card>
<tag @update="updateFunction()" />
<otherTag />
<b
浏览 3提问于2019-06-16得票数 1
1回答
例如，如何使用h函数在vue3的setup函数中呈现以下模板？ <label v-for="service in services" :key="service">
<slot name="before" :service="service"></slot>
foobar
<slot name="after" :service="service"></slot>
</label>
浏览 64提问于2020-12-18得票数 1
回答已采纳
我是Vue.js的新手，我正在使用一个v-for来迭代一个对象数组，但是我需要计算这个v-for中的单个字段(precoPorKg)。
要计算这个值，我需要输入item.quantidade有一些值，在此之后，我需要进行以下操作：
(item.quantidade * item.valorUnitario)/( item.quantidade * item.pesoUnitario)
我的v-for
<tr v-for="(item, index) in step2">
<td>{{ item.produto }}</td>
浏览 2提问于2020-05-17得票数 1
回答已采纳
2回答
我有一个使用v-for填充的数组。还有一个按钮，当单击时，使用splice()从数组中删除一些项。但是，由于某种原因，它只是删除数组的所有项。
下面是代码：
new Vue({
el: '#app',
data: {
numbers: {
list: [1, 2, 3],
index: 0
}
},
computed: {
getNumbers() {
let nums = this.numbers.list
return nums.splice(this.numbers.index,
浏览 0提问于2018-08-14得票数 0
回答已采纳
2回答
从父组件到子组件的事件
、、、
我有在父组件中生成的事件，并且子组件必须对其做出反应。我知道这不是vuejs2中推荐的方法，我不得不做一个$root emit，这是非常糟糕的。我的代码是这样的。
<template>
<search></search>
<table class="table table-condensed table-hover table-striped" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scr
浏览 0提问于2017-04-06得票数 7
回答已采纳
我们可以在Vue中这样做吗，或者我只能使用箭头函数。
<template>
<vue-component
v-for="(data, index) in someArr"
@someEvent="someMethodWrapper(data)"
>
</vue-component>
</template>
<script>
methods: {
someMethodWrapper(data) {
return (someotherData) => {
this.setN
浏览 0提问于2022-06-13得票数 0
回答已采纳
代码：
<ul id='app'>
<li v-for="item of items">{{ item | log }}</li>
<model :num='num'></model> <!-- changing num will trigger <li> updates -->
</ul>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.mi
浏览 0提问于2018-05-20得票数 1
回答已采纳
因此，每当用户向以前的输入添加一个值时，我都需要创建一个表单输入。我发现了一些关于如何创建动态表单以及如何观察表单输入以调用函数的很好的问题，但我不知道如何将这两者结合起来并使它们协同工作。
new Vue({
el: '#form',
data: {
items: [],
},
methods: {
addItem() {
this.items.push({
value: ''
});
}
}
})
<script src="https://cdn.jsdel
浏览 3提问于2018-04-08得票数 2
我有(我的第一个) vue应用程序，它从api获取数据并呈现一些选择元素。我想把每个盒子分成另一个文件(一个文件用于从api获取数据，第二个文件用于渲染选择，第三个文件用于渲染列表)。如何将数据从
我尝试从api实例中获取数据：
export default {
props: {
filters: apiIntance.$data.kpis.filters,
此时此刻，我有这样的想法：
<!-- src/components/Filters.vue -->
<template>
<div class="filters
浏览 2提问于2019-08-19得票数 0
我们如何将Bootstrap-Vue布局集成到一个v-for输出到一个导入的Vue组件中？
这就是我尝试过的..。
<b-container>
<b-row>
<b-col sm="6">
...
</b-col>
<b-col sm="6" v-for="item in items">
<ComponentName></ComponentName>
</b-col>
</b-row
浏览 3提问于2020-09-18得票数 2
回答已采纳
我试图弄清楚如何将v-for成员和原始事件数据访问到vue.js中事件的绑定函数中，但在我的一生中却无法在文档中找到它。
我想要的：
<div class="card pickup" v-for="pickup in pickups">
<select v-on:change="locationChanged">
使用locationChanged在vue对象中调用以下方法：
vuePickup = new Vue({
el: '#pickups',
data: {
浏览 2提问于2019-02-17得票数 0
回答已采纳
我使用一个v-for循环来处理从JSON文件中获取的数据。在加载新的JSON文件并替换旧文件后，有没有办法重新呈现DOM和整个v-for循环？我试图实现的是在单击时加载不同的产品集并更新DOM。
Vue.use(VueResource);
var productsList = new Vue({
el: '#vue',
data: function () {
return {
products: []
};
},
ready: function () {
this.$
浏览 7提问于2017-02-02得票数 1
我在VS代码中遇到了一个问题，使用它来自动格式化JS和Vue代码。
例如，如何将其设置为保存以下内容：
<Todo
v-for="todo in todos"
:key="todo.id"
/>
意思是多行，每个属性一个？
到目前为止，如果我这样做并按cmd +s，它会将它重新格式化如下：
<Todo v-for="todo in todos" :key="todo.id" />
这是我目前在settings.json中拥有的内容：
"editor.formatOnSave
浏览 8提问于2022-05-10得票数 0
我正在尝试从我的Vue-Instance中呈现一个对象列表。每个对象都应该使用一个组件，所以我将组件放入v-for循环中。但我得到的只是list.title和list.text，而不是正确的值。
有没有在v-for循环中使用组件的特殊方法？
我找到了这个，但不知道如何使用它，也不知道它是否正确。
应用程序：
<div id="app">
<div v-for="list in lists">
<listcard title="list.title" text="list.text
浏览 1提问于2016-08-15得票数 9
回答已采纳
1回答
我最近正在学习Vue，我已经阅读了有关Vue 的文档。但是，我仍然不明白如何将数据对象传递给道具并将其呈现在组件模板中。
这是我的小提琴
或者看看下面的代码。
Vue.component('greeting', {
template: `<h1>{{index}}</h1>`,
props: ['persons']
});
var vm = new Vue({
el: '#app',
data: {
persons: {
'Mike': 'Software
浏览 0提问于2018-07-17得票数 0
回答已采纳
我正在尝试调用一个从vue.js组件内部生成url的函数。该函数为[[ generateGitUrl ]] 我不确定我尝试解决这个问题的方向是否正确。我的示例不起作用，因为我没有将repo, branch, hash传递给该方法。因此，我的问题是，如何将这些数据从我的示例中的模板传递到[[ generateGitUrl ]] (如果这是可能的话？)？我怀疑我做这件事的方式是完全错误的，所以对建议持开放态度。 vue.js组件 Vue.component('git-refs', {
delimiters: [ '[[', ']]' ],
浏览 33提问于2019-06-05得票数 1
回答已采纳
1回答
我是一个新的VueJS学生，我试图做一个指令，我停下来了，因为我不知道为什么我不能得到这个元素。我做错什么了？我只想得到el元素。
下面是一个或下面的代码。
<div class="container" id="vue-app">
<ul>
<li v-test v-for="item in itens">
{{item.name}}
</li>
</ul>
<span id="directiveLog
浏览 3提问于2017-12-21得票数 0
回答已采纳
1回答
使用vue时，我通常将任何复杂的逻辑提取到方法中，例如
<li v-for="todo in todos" v-show="!isTodoComplete(todo)">
{{ todo }}
</li>
但当我尝试同样的方法时，svelte：
{#each todos as todo}
<li hidden={isComplete(todo)}>{todo}</li>
{/each}
...
methods: { isComplete (todo) { ... } }
我搞错了TypeError: c
浏览 1提问于2018-07-25得票数 2
回答已采纳
我使用
<template>
<div>
<img class="image" v-for="(image, i) in images" :src="image" @click="index = i">
<vue-gallery-slideshow :images="images" :index="index" @close="index = null" style=
浏览 23提问于2021-02-19得票数 0
我可以知道如何将子组件中输入的所有数据提取到父文件中吗？
index.html
<form v-on:submit.prevent="onSubmit">
<div class="form-group" v-for="n in 4">
<food :lists="foodLists"></food>
</div>
<button type="submit" class="btn btn-primary
浏览 6提问于2017-08-04得票数 2
所以我在做一个选择，当你选择一个选项时，它运行一个函数。问题是，我的navbar.vue中的选择和函数都在index.vue中。
函数需要在index.vue中，因为它从我的数据库收集产品列表，并将它们加载到我的HTML中。
我是否可以在index.vue中从navbar.vue运行函数，或者在navbar.vue中运行相同的函数，但将输出发送给index.vue？
下面是一个如何更好地理解这一问题的方案：
When option selected Navbar.vue --> Runs changeCountry function in index.vue
或
When option
浏览 2提问于2020-07-11得票数 0
回答已采纳
我有以下简单的v-for循环： <div class="HolderRow" v-for="(row, index) in 9" :key="index">
<Holder v-for="(row, index) in 11" :key="index" :holder1="increment()" />
</div> 在每次渲染" Holder“时，我希望将计数器递增1，并将其作为道具传递给Holder。递增方法和递增数据如下： export de
浏览 60提问于2020-04-04得票数 2
回答已采纳
2回答
我有一个json，它保存在我的Vue数据中，如下所示：
new Vue({
el: 'myDiv',
data: {
dishes: Dishes
}
})
我的Json如下：
Dishes = [
{
Id: 1,
Name: "First dish",
Rating: 2.5
},
{
浏览 0提问于2018-07-04得票数 0
回答已采纳
2回答
我的vue数据由人员列表组成。
self.vue = new Vue({
el: "#vue-div",
delimiters: ['${', '}'],
unsafeDelimiters: ['!{', '}'],
data: {
users: [
{first_name: "John",
last_name: "Doe",
email: "jdoe@
浏览 0提问于2016-11-12得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
