Vuejs 3中使用鍵在Json物件中查詢值的方法

Question

我對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

Answer 1

清單要點在這裡。

您可以使用Array::find()在陣列中尋找值。 另外，您可以使用computed來獲得一個響應式的值，以便在模板中使用。此外，我認為您可以使用reactive來取代ref#來處理步驟。如果步驟不會改變，您可以刪除reactive，因為在這種情況下它是不需要的。

<script setup>
    
  import { reactive, ref, computed } from 'vue';

  const wizardSteps = reactive([ { id: 1, label: "步骤 1" }, { id: 2, label: "步骤 2" }, { id: 3, label: "步骤 3" } ]);
  const currentStep = ref(1)

  const currentLabel = computed(() => wizardSteps.find(({id}) => id === currentStep.value).label);

</script>

<template>
  <div>当前步骤 {{ currentStep }}</div>
  <div>当前标签 {{ currentLabel }}</div>
  <button @click="currentStep = currentStep === wizardSteps.length ? 1 : currentStep + 1">下一步</button>
</template>

Answer 2

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')

<script src="https://unpkg.com/vue@3.3.4/dist/vue.global.prod.js"></script>

<div id="app">
  <h2>Manipulate ID</h2>
  <h4>By Input</h4>
  <!-- input for can change id -->
  <input v-model="current_step_id" type="number" />
  
  <h4>or By Buttons</h4>
  <!-- button for select id -->
  <button v-for="step of wizard_steps" @click="select_step(step)">
    Select step #{{ step.id }} ({{ step.label }})
  </button>
  
  <h2>Check Current Label</h2>
  <!-- check label for selected id -->
  <div>{{ current_step_label }}</div>
</div>