vue-component - 如何在Vue中使用v-for传递函数的参数?
问题描述
我试图通过使用 v-for 循环遍历数组项来将参数传递给函数。
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y"></h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:@click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
drawer: false
}),
methods: {
change(val) {
console.log(val);
this.$refs.y.innerText = val;
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
我希望将 items 数组中的参数传递给 change(val) 方法,为每个 v-list-item 提供一个不同的事件侦听器。然后我希望带有 ref="y" 的 h1 根据我单击的 v-list-item 更改它的文本。但到目前为止,我收到浏览器错误“渲染错误:”TypeError:无法设置未定义的属性“innerText””
解决方案
<h1>
您可以将 innerText 绑定到反应变量,而不是设置 innerText 。{{}}
您可以在数据中创建一个可以存储所选方法的变量,然后使用语法将其绑定到 innerText 。这样做会更符合 Vue 最佳实践。让我告诉你我的意思。
<template>
<v-app>
<v-app-bar app>
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-spacer></v-spacer>
<h1 ref="y">{{ selectedMethod }}</h1>
</v-app-bar>
<v-content>
<router-view />
<v-navigation-drawer v-model="drawer" class="x">
<v-list-item
v-for="item in items"
:key="item.unidade"
:to="item.link"
:@click="change(item.method)"
>{{item.unidade}}</v-list-item>
</v-navigation-drawer>
</v-content>
</v-app>
</template>
<script>
export default {
name: "App",
data: () => ({
items: [
{ unidade: "IPE", link: "/ipe", method: "IPE" },
{ unidade: "DCSI", link: "/dcsi", method: "DCSI" },
{ unidade: "RT", link: "/rt", method: "RT" }
],
selectedMethod: '', // Initially blank
drawer: false
}),
methods: {
change(val) {
this.selectedMethod = val; // Update the value of selectedMethod
}
}
};
</script>
<style lang="stylus" scoped>
.x {
position: absolute;
}
</style>
希望这可以帮助!
推荐阅读
- python - 为这个问题在 python 中编写更好的代码
- python - Boosting算法在Python中的实现
- python - Python 3.7 smtplib sendmail 仅发送给列表中的第一个收件人
- r - 在 R 中下载数据集闪亮
- matplotlib - Plotly mpl_to_plotly 错误:“Spine”对象没有属性“is_frame_like”
- javascript - 使用 Google 可视化工具和 Javascript 从响应中设置数组
- javascript - 右轴未显示在双轴分组条形图和折线图 D3 上
- react-native - 无法填满 DrawerContentScrollView 的整个高度
- c# - 如果我使用“打开方式”,C# WPF 应用程序会静默崩溃
- android - 具有多种风格的 React Native Android 不会启动其 Activity