Vue forループでVue forループ内の反復可能な要素を渡す

Question

私はVuexで作業しています。コンポーネントの1つでは、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のようなコードが計算されたプロパティとしてd定義する

<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

のように見えます。

これは方法である必要があります。

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

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

    } 
}