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) 

    } 
}