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

时间:2017-08-17 18:42:48

标签: vue.js action commit vuex

我正在使用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>

1 个答案:

答案 0 :(得分:0)

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

应该是一种方法。

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

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

  }
}