Vue js 동적 데이터 구성 요소

Vue js 동적 데이터 구성 요소

부모 구성 요소에서 소품을 사용하여 자식 구성 요소로 동적 데이터를 전달하고 있다.그래서 나는 어떻게 myColor 소품을 총값에 더해서 최종 값으로 결과를 렌더링할 수 있는지 알고 싶다.부모 구성 요소(형상)와 자식 구성 요소(색상)로 게시물을 이미 업데이트한 경우

나는 Vue 2와 웹팩을 사용하고 있다.

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

나는 이 스크립트에서 당신의 요구를 이해하지 못하지만, Vue의 단방향 데이터 흐름에 주의하라.따라서, 당신은 소품을 통해 접근할 수 있는 상위 구성 요소에서 하위 구성 요소로 데이터를 전송할 수 있지만 하위 구성 요소에서 상위 구성 요소로 데이터를 전송할 수는 없다.구성 요소 간에 양방향 데이터 흐름이 필요한 경우 Vuex를 사용하십시오.

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/vue@2.4.2/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>

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/vue@2.4.2/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>

선택/선택 취소 확인란 예제:

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/vue@2.4.2/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>

참조URL: https://stackoverflow.com/questions/46132669/vue-js-dynamic-data-component