2
我正在使用Vuex,并且在其中一个组件中,我尝试在按钮v-for循环中将可迭代元素作为函数参数传递。我的问题是,而不是得到我想要的元素,我得到一个空的对象...在V-for循环中传递可迭代元素作为函数参数使用Vue
我也想知道如果我传递参数到商店行动正确的方式?
代码放在如下:
//Side_bar.vue
<template>
<div id="sideBar">
<ul>
<li v-for='l in links'>
<button v-on:click='d(l.title)'>{{l.title}}</button>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'sideBar',
data() {
return {
links: [
{'title':'asset', 'valuesss':'ASSET'},
{'title':'task', 'valuesss':'TASK'},
{'title':'user', 'valuesss':'USER'}
]
}
},
computed:{
d(v){
console.log(v)
// update active table
this.$store.dispatch('updateActiveTable',v)
}
}
}
</script>
<style>
li {
list-style-type: none;
padding-bottom: 5px;
}
</style>
存储文件看起来像这样
//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
activeTable: 'assets' // def view
};
const mutations = {
setActiveTable(context,v){
context.activeTable = v
}
};
const getters={
getActiveTable(context){
//return active table
return context.activeTable
}
};
const actions={
updateActiveTable(context,v){
console.log(context)
context.commit('setActiveTable',v)
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
App.vue看起来像
<template>
<div id="app">
<sideBar></sideBar>
<tableComponent></tableComponent>
</div>
</template>
<script>
import sideBar from './components/Side_bar'
import tableComponent from './components/Table_component'
export default {
name: 'app',
components:{
sideBar,
tableComponent
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
small {
display: block;
font-style: italic;
}
</style>
该过程在什么时候变成了“空白物体”? – Bert
不知道,我已经看到它是一个对象,因为我已经在side_bar.vue文件的d(v)函数中使用了console.log(v)。请注意,在 {{l.title}}显示我期望的字符串,但l.title作为参数传递给对象 –