Vue js v-if在共享切换按钮上进行条件渲染

Posted 2023-02-23

【中文标题】Vue js v-if在共享切换按钮上进行条件渲染

【英文标题】：Vue js v-if condicional rendering on a shared toggle button

【发布时间】：2019-02-07 20:55:36

【问题描述】：

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

有选项是或否的切换，如果选择是，则子组件将被渲染，否则将保持隐藏。 我正在尝试使用条件来使用指令 v-if 或 v-show 将子组件显示到父组件中，但我找不到方法将布尔值值从子组件发送到父组件。

【参考方案1】：

希望这会有所帮助！

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