iT邦幫忙

2

Vue3如何綁定input或button,在onclick事件,使其消失跟顯現

  • 分享至 

  • xImage

大家好,
想請教,今天我有兩個區塊。
區塊二是選單,區塊一是已選擇

我想在區塊二,按下按鈕A之後,按鈕A會顯示在區塊一裡。
同時,區塊二的按鈕A會消失。
這該怎麼做呢?


我的環境是:Vue3、Vite、tailwindCss
目前我是在區塊一使用label、區塊二使用input的checkbox
兩者之間,使用id='check'+選單變數,去做綁定。

(1)這是剛開啟網頁時:

(2)這是點選區塊二的按鈕時,會顯示在區塊一裡。
目前卡在不知道怎麼讓區塊二的按鈕消失,並且在取消選擇時,還能再次出現。

這是我的程式碼:

<script setup>
    import {computed, ref} from 'vue'
    //選單
    const array = ref([
        1,2,'a',4,'b'
    ])
    //已選擇
    const checked= ref([])  
</script>

<template>
    <div class="bg-green-200 p-5">
        <h2>我是區塊一</h2>
        <div class="flex my-5">
            <div v-for="(check,index) in checked" :key="check+index" class="mr-2">
                <label :for="'check'+check" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{check}}</label>   
            </div>
        </div>
    </div>
    <div>我是已點選變數:{{checked}}</div>
    <div class="bg-red-200 p-5">
        <h2>我是區塊二</h2>
        <div class="flex mt-5">
            <div class="w-20" v-for="(single,index) in array" :key="single+index">
                <div>
                    <label :for="'check'+single" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">{{single}}</label>
                    <input type="checkbox" :value="single" :id="'check'+single" v-model="checked" class="hidden">
                </div>
            </div>
        </div>
    </div>
</template>

這是移除CSS後的程式碼,只有純功能(方便閱讀^^)

<script setup>
    import {computed, ref} from 'vue'
    //選單
    const array = ref([
        1,2,'a',4,'b'
    ])
    //已選擇
    const checked= ref([])  
</script>

<template>
    <div class="bg-green-200 p-5">
        <h2>我是區塊一</h2>
        <div class="flex my-5">
            <div v-for="(check,index) in checked" :key="check+index">
                <label :for="'check'+check">{{check}}</label>   
            </div>
        </div>
    </div>
    <div>我是已點選變數:{{checked}}</div>
    <div>
        <h2>我是區塊二</h2>
        <div>
            <div v-for="(single,index) in array" :key="single+index">
                <div>
                    <label :for="'check'+single">{{single}}</label>
                    <input type="checkbox" :value="single" 
                           :id="'check'+single" v-model="checked" 
                           class="hidden"
                     >
                </div>
            </div>
        </div>
    </div>
</template>
Homura iT邦高手 1 級 ‧ 2021-10-27 13:22:28 檢舉
你vue實例沒貼出來啊...
水無痕 iT邦新手 3 級 ‧ 2021-10-28 09:42:09 檢舉
做了一個簡單的版本

https://codepen.io/ragnakuei/pen/NWvgjde
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
froce
iT邦大師 1 級 ‧ 2021-10-27 15:08:23
最佳解答

https://jsbin.com/fatojakixa/1/edit?html,console,output
vue2的版本,vue3目前懶得學
重點是判別兩個array並且在裡面加減元素。

greenriver iT邦研究生 4 級 ‧ 2021-10-28 08:54:15 檢舉

謝謝
不過有個地方我不懂,
為什麼修改currentBlock、anotherBlock的值,
block1跟block2的值也會跟著改變?
currentBlock = this.block1
anotherBlock = this.block2
這兩段,不是只是將block1、block2的值,複製到currentBlock、anotherBlock而已嗎?為什麼會有綁定的效果呢?

froce iT邦大師 1 級 ‧ 2021-10-28 11:42:35 檢舉
currentBlock = this.block1

這句不是複製,是把this.block1的記憶體地址指派到currentBlock這變數
currentBlock就是this.block1這個array的別名而已。

這邊這樣寫只是為了抽象化讓code比較清楚,你完全可以直接對兩個array做刪增的動作。

我要發表回答

立即登入回答