84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
我對Vuejs還不太熟悉，需要透過'id'引用來存取'label'。
const Wizard_steps = ref([ { id: 1, 標籤: "第1 步" }, { id: 2, 標籤: "第2 步" }, { id: 3, 標籤: "步驟3" } ]) const currentstep = ref([編號])
如果currentstep === 2，我想訪問"step 2"的數據，我嘗試過： wizard_steps.filter(id=2).label
wizard_steps.filter(id=2).label
清單要點在這裡。
您可以使用Array::find()在陣列中尋找值。 另外，您可以使用computed來獲得一個響應式的值，以便在模板中使用。此外，我認為您可以使用reactive來取代ref#來處理步驟。如果步驟不會改變，您可以刪除reactive，因為在這種情況下它是不需要的。
Array::find()
computed
reactive
ref
当前步骤 {{ currentStep }} 当前标签 {{ currentLabel }} 下一步
在Vue中，我們使用響應式變數來影響DOM的變數。在這裡，我們可以聲明wizard_steps，稍後可以從const變數中建立的物件的.value#鍵中取得它們 - 您可以在提供的程式碼中看到這一點。我們需要建立一個變量，可以操作所選ID。根據所選ID，我們可以使用一個簡單的JavaScript陣列和find()函數來找到所選步驟，並顯示其標籤。使用computed()函數可以根據current_step_id的響應式變更調整與目前步驟關聯的標籤，該函數也宣告了一個響應式變數。但是，不能直接操作此變數。相反，當其內部使用的響應式變數發生變化時，更新其.value。
wizard_steps
.value
find()
computed()
current_step_id
您可以查看此範例程式碼。
const { createApp, ref, reactive, computed } = Vue const app = createApp({ setup() { // steps const wizard_steps = reactive([ { id: 1, label: "step 1" }, { id: 2, label: "step 2" }, { id: 3, label: "step 3" } ]) // current selected id const current_step_id = ref(1) // current label by selected id const current_step_label = computed(() => { // find current step by current id const current_step = wizard_steps.find((step) => step.id === current_step_id.value) // error, if step not found if (current_step === undefined) return `step not found by ID(${current_step_id.value})` // return current label by current step return current_step.label }) // change current_step_id by button const select_step = (step) => { current_step_id.value = step.id } return { wizard_steps, current_step_id, current_step_label, select_step } } }).mount('#app')
Manipulate ID By Input or By Buttons Select step #{{ step.id }} ({{ step.label }}) Check Current Label {{ current_step_label }}
清單要點在這裡。
您可以使用
Array::find()在陣列中尋找值。 另外，您可以使用computed來獲得一個響應式的值，以便在模板中使用。此外，我認為您可以使用reactive來取代ref#來處理步驟。如果步驟不會改變，您可以刪除reactive，因為在這種情況下它是不需要的。Solution
在Vue中，我們使用響應式變數來影響DOM的變數。在這裡，我們可以聲明
wizard_steps，稍後可以從const變數中建立的物件的.value#鍵中取得它們 - 您可以在提供的程式碼中看到這一點。我們需要建立一個變量，可以操作所選ID。根據所選ID，我們可以使用一個簡單的JavaScript陣列和find()函數來找到所選步驟，並顯示其標籤。使用computed()函數可以根據current_step_id的響應式變更調整與目前步驟關聯的標籤，該函數也宣告了一個響應式變數。但是，不能直接操作此變數。相反，當其內部使用的響應式變數發生變化時，更新其.value。您可以查看此範例程式碼。
const { createApp, ref, reactive, computed } = Vue const app = createApp({ setup() { // steps const wizard_steps = reactive([ { id: 1, label: "step 1" }, { id: 2, label: "step 2" }, { id: 3, label: "step 3" } ]) // current selected id const current_step_id = ref(1) // current label by selected id const current_step_label = computed(() => { // find current step by current id const current_step = wizard_steps.find((step) => step.id === current_step_id.value) // error, if step not found if (current_step === undefined) return `step not found by ID(${current_step_id.value})` // return current label by current step return current_step.label }) // change current_step_id by button const select_step = (step) => { current_step_id.value = step.id } return { wizard_steps, current_step_id, current_step_label, select_step } } }).mount('#app')