[Vuejs]-How to pass data from view to component in VueJS

by

0👍

You can pass data to a component using props.

<template>
  <div>@{{ ball }}</div>
</template>

<script>
export default {
  props: ['ball']
}
</script>

Then you would use your component in the view like this:

<template>
  <div v-for="(ball, key) in pattern" :key="key">
    <Rack :ball="ball" />
  </div>
</template>

<script>
export default {
  components: {
    Rack: () => import('./components/Rack.vue'),
  },
  data: () => ({
    pattern: [3, 4, 2, 6, 1, 8, 7, 9, 5]
  })
}
</script>

0👍

You just need to define a prop on the rack component and then pass the value to it
documentation

Vue.component('rack', {
  props: ['ball'],
  template: '<div>{{ball}}</div>'
})

new Vue({
  el: "#app",
  data() {
    return {
      pattern: [3, 4, 2, 6, 1, 8, 7, 9, 5]
    }
  },
  methods: {}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="(ball, key) in pattern">
    <rack :ball="ball"></rack>
  </div>
</div>

Leave a comment