使用 Vue 在 v-for 循环中将可迭代元素作为函数参数传递

Question

我正在使用 Vuex，在我的一个组件中，我尝试在按钮 v-for 循环中传递一个可迭代元素作为函数参数。我的问题是，我得到的不是我想要的元素，而是一个空对象...

我还想知道我是否以正确的方式将参数传递给商店操作？

代码如下：

//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>

Answer 1

代码将 d 定义为计算的属性。

应该是方法

methods:{
  d(v){
    console.log(v)

    // update active table
    this.$store.dispatch('updateActiveTable',v)

  }
}

使用 Vue 在 v-for 循环中将可迭代元素作为函数参数传递

Pass iterable element as function parameter in v-for loop with Vue

vue.js

action

commit

vuex