Vue js v-if - условный рендеринг на общей кнопке переключения - PullRequest
Новая
       8

Vue js v-if - условный рендеринг на общей кнопке переключения

0 голосов
/ 02 сентября 2018 
        //PARENT COMPONENT

     <template>
          ....
        <div class="input-wrapper">//Toggle button container
            <label class="input-label">
              SELECT YES OR NOT
            </label>
            <toggle //child component, toggle button
            :options="shipping"
          />
        </div>
        <div
           v-if="destiny[0].value"
           class="input-wrapper">
            <label class="input-label">
              IF YES THIS CONTAINER WILL BE DISPLAYED
            </label>
            <toggle
              :options="Options"
              />
         </div>

                .....
        </template>
        <script>
        import Toggle from "....";
                export default {
                  components: {
                    Toggle,
                  },
                  data: function () {
                    return {
                      destiny: [{
                        label: 'Yes',
                        value: true
                      },
                      {
                        label: 'No',
                        value: false
                      }
                      ],
                      Options: [{
                        label: 'A',
                        value: 'a'
                      },
                      {
                        label: 'B',
                        value: 'b'
                      },
                      {
                        label: 'C',
                        value: 'c'
                      }]
                    }
                  }
                }
               </script>


        ///CHILD COMPONENT


        <template>
          <div class="toggle">
             <button
               v-for="option in options"
               :key="option.value"
               :class="{
                 active: option.value === value
               }"
               class="btn"
               @click="() => toggleHandler(option.value)">{{ option.label }} . 
             </button>
          </div>
        </template>

            <script>

            export default {
              props: {
                options: {
                  type: Array,
                  required: true
                }
              },
              data: function () {
                return {
                  value: this.options[0].value
                }
              },
              methods: {
                toggleHandler (value) {
                  this.$emit('input', value)
                  this.value = value
                }
              }
            }
            </script>

Существует возможность переключения с параметрами YES или NOT, если выбрано yes, дочерний компонент будет отображаться, в противном случае будет скрываться. Я пытаюсь использовать условие для отображения дочернего компонента в родительский компонент с помощью директив v-if или v-show , но я не смог найти способ отправки логическое значение от дочернего компонента к родительскому компоненту.

1 Ответ

0 голосов
/ 02 сентября 2018

Надеюсь, это поможет !! 

// CHILD
Vue.component('child', {
	template: '<div>TOGGLE:- <input type="checkbox" @click="emit"/></div>',
	data() {
		return {
			checked: false
		};
	},
	methods: {
		emit: function() {
			this.checked = !this.checked;
			this.$emit('event_child', this.checked);
		}
	}
});

// PARENT
var vm = new Vue({
	el: '#app',
	data: function() {
		return {
			toggleStatus: false
		}
	},
	methods: {
		eventChild: function(checked) {
			this.toggleStatus = checked;
		},
	}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>

<div id="app">	
	<child v-on:event_child="eventChild"></child>
  <div id="toggle">TOGGLE STATUS => {{toggleStatus}}</div>
</div>
...