Vue js dynamic data component

Question

I'm passing some dynamic data from a parent component to a child component using props .. So I would like to know how I can add myColor prop to total value and show it an render the result in a final value. I've already update the post with the parent component (shapes) and the child component (colors)

I'm using Vue 2 and webpack.

//parent component

<v-layout row wrap primary-title v-for="shape in shapes" :key="shape.id">
        <v-layout column>
            <v-flex >
                <v-subheader>{{shape.name}} {{shape.price}}€ {{selectedShape.price}}</v-subheader>
            </v-flex>
        </v-layout>
    </v-layout>
        <my-colors :myShape="selectedShape.price"></my-colors>

<script>

import Colors from './Colors.vue';

export default {

    components: {
        Colors
    },

    data() {

        return {
            selectedShape: {},
            shapes: [{
                id: 1,
                name: "Square",
                price: 4,
                href: "../../static/square.jpg"
            }, {
                id: 2,
                name: "Circle",
                price: 6,
                href: "../../static/circle.jpg"
            }]
        }
    },

    computed: {

        totalShape: function() {
            var totalShape = 0;
            for (var i = 0; i < this.shapes.length; i++) {
                if (this.shapes[i].selected) {
                    totalShape += this.shapes[i].price;
                }
            }
            return totalShape;
        }
    },
    methods: {
        getSelectedShape() {
                return this.selectedShape;

            },
    }
}

</script>


//child component
     <v-layout>
                <v-layout>
                    <v-flex >
                        <h3 >Total price:</h3>
                    </v-flex>
                </v-layout>
                <v-layout>
                    <v-flex 
                        <v-subheader> {{total}} {{myShape}}   €</v-subheader>
                    </v-flex>
                </v-layout>
            </v-layout>

        <script>

          export default {
              props: ['myShape'],

              data: () => ({

                  checked1: '',
                  showCart: false,
                  colors: [{
                      id: 1,
                      name: "white",
                      price: 2,
                      checked: '',
                  }, {
                      id: 2,
                      name: "black",
                      price: 2.0,
                      checked: '',
                  }, {
                      id: 3,
                      name: "Grey",
                      price: 2.25,
                      checked: '',
                  }, {
                      id: 4,
                      name: "Blue",
                      price: 1.6,
                      checked: '',
                  }, {
                      id: 5,
                      name: "Red",
                      price: 2.5,
                      checked: '',
                  }, {
                      id: 6,
                      name: "Yellow",
                      price: 2.75,
                      checked: '',
                  }],
              }),

              computed: {

                  total: function() {
                      var total = 0;
                      for (var i = 0; i < this.colors.length; i++) {
                          if (this.colors[i].checked) {
                              total += this.colors[i].price;
                          }
                      }
                      return total; 
                  },
              },
          }

          </script>

Unknown Unknown · Accepted Answer · 2017-09-09T16:26:32

I do not understand your needs from this script, but be aware of one way data flow in Vue. So, you can send data from parent component to child component in which its will be accessible through props, but not from child component to parent. Use Vuex if you need two-way data flow between components.

var child = {
  template: '#child',
  props: ['fromParent']
}

Vue.component('parent', {
  template: '#parent',
  components: {
    child: child
  },
  props: ['fromInstance']
})

new Vue({
  el: '#app',
  data: {
    instanceData: {
      text: 'Original value'
    }
  },
  created () {
    var self = this
    setTimeout(_ => self.instanceData.text = 'Changed value', 3000)
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <parent :from-instance="this.instanceData"></parent>
</div>

<template id="parent">
  <div>
    <child :from-parent="this.fromInstance"></child>
  </div>
</template>

<template id="child">
  <p>{{this.fromParent.text}}</p>
</template>

Example with SELECT:

var child = {
  template: '#child',
  props: ['selected']
}

Vue.component('parent', {
  template: '#parent',
  components: {
    child: child
  },
  props: ['options'],
  data () {
    return {
      parentCar: 'none'
    }
  },
  methods: {
    update (e) {
      this.parentCar = e.target.value
    }
  }
})

new Vue({
  el: '#app',
  data: {
    items: {
      audi: 'Audi',
      bmw: 'BMW',
      mercedes: 'Mercedes',
    }
  }
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <parent :options="this.items"></parent>
</div>

<template id="parent">
  <div>
    <select @change="update">
      <option value="none" selected>Car</option>
      <option v-for="(value, key) in options" :value="key">
        {{ value }}
      </option>
    </select>
    <child :selected="this.parentCar"></child>
  </div>
</template>

<template id="child">
  <p>{{ selected }}</p>
</template>

Example with checked / unchecked checkbox:

var child = {
  template: '#child',
  props: ['checked']
}

Vue.component('parent', {
  template: '#parent',
  components: {
    child: child
  },
  data () {
    return {
      checkbox: false
    }
  }
})

new Vue({
  el: '#app'
})

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>

<div id="app">
  <parent></parent>
</div>

<template id="parent">
  <div>
    <input type="checkbox" v-model="checkbox">
    <child :checked="this.checkbox"></child>
  </div>
</template>

<template id="child">
  <p>{{ checked }}</p>
</template>

Vue js dynamic data component

1 Answers