Vue를 사용하여 v-for loop에서 반복 가능한 요소를 함수 매개 변수로 전달

Vue를 사용하여 v-for loop에서 반복 가능한 요소를 함수 매개 변수로 전달

Vuex를 사용하고 있는데 컴포넌트 중 하나에서 반복 가능한 요소를 v-for loop 버튼의 함수 파라미터로 전달하려고 합니다.문제는 내가 원하는 요소를 얻는 대신 빈 물체를 얻는다는 거야

또한 매장 작업에 파라미터를 올바르게 전달하고 있는지 알고 싶습니다.

코드는 다음과 같습니다.

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

코드는 다음을 정의합니다.d계산 속성으로 사용합니다.

방법이어야 합니다.

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

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

  }
}

언급URL : https://stackoverflow.com/questions/45742804/pass-iterable-element-as-function-parameter-in-v-for-loop-with-vue