大家好,
想請教,今天我有兩個區塊。
區塊二是選單,區塊一是已選擇。
我想在區塊二,按下按鈕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>
https://jsbin.com/fatojakixa/1/edit?html,console,output
vue2的版本,vue3目前懶得學
重點是判別兩個array並且在裡面加減元素。
謝謝
不過有個地方我不懂,
為什麼修改currentBlock、anotherBlock的值,
block1跟block2的值也會跟著改變?
currentBlock = this.block1
anotherBlock = this.block2
這兩段,不是只是將block1、block2的值,複製到currentBlock、anotherBlock而已嗎?為什麼會有綁定的效果呢?
currentBlock = this.block1
這句不是複製,是把this.block1的記憶體地址指派到currentBlock這變數
currentBlock就是this.block1這個array的別名而已。
這邊這樣寫只是為了抽象化讓code比較清楚,你完全可以直接對兩個array做刪增的動作。