Vuejs 3 でキーを使用して Json オブジェクトの値をクエリする方法

Question

Vuejs は初めてなので、「id」参照を介して「label」にアクセスする必要があります。

const Wizard_steps = ref([ { id: 1, label: "ステップ 1" }, { id: 2, label: "ステップ 2" }, { id: 3, label: " ステップ 3 " } ]) const currentstep = ref([number])

currentstep === 2 の場合、「ステップ 2」のデータにアクセスしたいので、次のことを試しました。 wizard_steps.filter(id=2).label

Answer 1

ここにハイライトをリストします。

Array::find() を使用して、配列内の値を検索できます。 あるいは、computed を使用して、テンプレートで使用する応答性の値を取得することもできます。また、#ref の代わりに reactive を使用して手順を処理できると思います。ステップが変更されない場合は、reactive はこの場合には必要ないため、削除できます。 リーリー

Answer 2

＃＃＃解決＃＃＃

Vue では、DOM 変数に影響を与えるためにリアクティブ変数を使用します。ここで、

wizard_steps

を宣言できます。これは、const 変数で作成されたオブジェクトの .value キーから後で取得できます。これは、提供されたコードで確認できます。選択した ID を操作できる変数を作成する必要があります。選択した ID に基づいて、単純な JavaScript 配列と find() 関数を使用して、選択したステップを検索し、そのラベルを表示できます。 computed() 関数を使用して、current_step_id の応答的な変更に基づいて現在のステップに関連付けられたラベルを調整します。これにより、応答性の変数も宣言されます。ただし、この変数を直接操作することはできません。代わりに、内部で使用するリアクティブ変数が変更されたときに、その .value を更新します。 このサンプルコードをご覧いただけます。

リーリー リーリー