Bagaimana untuk menanyakan nilai dalam objek Json menggunakan kekunci dalam Vuejs 3
P粉413307845
2023-09-02 20:14:08
<p>Saya baru menggunakan Vuejs dan perlu mengakses 'label' melalui rujukan 'id'. </p>
<p><kod>const Wizard_steps = ref([ { id: 1, label: "Langkah 1" }, { id: 2, label: "Langkah 2" }, { id: 3, label: " Langkah 3 " } ]) const currentstep = ref([nombor]) </code></p>
<p>Jika currentstep === 2, saya mahu mengakses data "langkah 2", saya cuba:
<kod>wizard_steps.filter(id=2).label</code></p>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Senaraikan sorotan di sini.
Anda boleh menggunakan
Array::find()untuk mencari nilai dalam tatasusunan. Sebagai alternatif, anda boleh menggunakancomputed来获得一个响应式的值，以便在模板中使用。此外，我认为您可以使用reactive来代替ref来处理步骤。如果步骤不会改变，您可以删除reactivekerana ia tidak diperlukan dalam kes ini.<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>Penyelesaian
Dalam Vue, kami menggunakan pembolehubah reaktif untuk mempengaruhi pembolehubah DOM. Di sini kita boleh mengisytiharkan
wizard_steps，稍后可以从const变量中创建的对象的.value键中获取它们 - 您可以在提供的代码中看到这一点。我们需要创建一个变量，可以操作所选ID。根据所选ID，我们可以使用一个简单的JavaScript数组和find()函数来找到所选步骤，并显示其标签。使用computed()函数可以根据current_step_id的响应式变化调整与当前步骤关联的标签，该函数还声明了一个响应式变量。但是，不能直接操作此变量。相反，当其内部使用的响应式变量发生变化时，更新其.value.Anda boleh menyemak kod sampel ini.
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>