Vuejs 3 根据key查询Json对象中的值

Question

我对 Vuejs 还很陌生，需要从“id”引用访问“标签”。

const wizard_steps = ref([
  { id: 1, label: "step 1" },
  { id: 2, label: "step 2" },
  { id: 3, label: "step 3" }
])
const currentstep = ref([Number])

如果

currentstep === 2

我想访问“第2步”数据，我已经尝试过：

wizard_steps.filter(id=2).label

Answer 1

解决方案

在 Vue 中，我们对想要影响 DOM 的变量使用反应式变量。在这里我们可以声明

wizard_steps

，稍后可以从 const 变量中创建的对象的

.value

键获取 - 您可以在提供的代码中看到这一点。我们需要创建一个可以在其中操作所选 ID 的变量。根据所选的 ID，我们可以使用

find()

函数和简单的 JavaScript 数组来查找所选的步骤，并显示其标签。检索与当前步骤关联的标签可以使用

current_step_id

函数调整为

computed()

的反应性变化，该函数还声明一个反应性变量。然而，这个变量不能被直接操作。相反，当其中使用的反应变量发生变化时，它的

.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/[email protected]/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>

更多信息

ref()

- Vue 文档（反应式核心）

reactive()

- Vue 文档（反应式核心）

computed()

- Vue 文档（反应式核心）

Array.property.find()

- MDN 文档（JavaScript 数组函数）

Answer 2

列表要点在这里。

您可以使用

Array::find()

来查找数组中的值。 您还可以使用

computed

来获得反应值，以便可以在模板中使用它。另外，我认为您可以使用

reactive

代替

ref

作为步骤。如果步骤没有改变，您可以删除

reactive

，因为在这种情况下不需要它

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

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

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

</script>

<template>
  <div>Current step {{ currentStep }}</div>
  <div>Current label {{ currentLabel }}</div>
  <button @click="currentStep = currentStep === wizardSteps.length ? 1 : currentStep + 1">Next Step</button>
</template>

Answer 3

也许

wizard_steps.filter(id=2).labelt

也许你应该用“===”替换“=”？

例如：

wizard_steps.filter(item =>item.id === 2).labelt

Answer 4

使用组合 API :

const wizard_steps = ref([
  { id: 1, label: "step 1" },
  { id: 2, label: "step 2" },
  { id: 3, label: "step 3" }
]);

function getLabelFromId(targetId) {
  return wizard_steps.value.find(step => step.id === targetId).label
}

// Example of use
const secondLabel = getLabelFromId(2)

console.log(secondLabel) // 'step 2'

请注意，您需要 .value 才能访问

wizard_steps

，因为它是

ref

。