如何在VueJs3中发送不同数组的密钥

9nvpjoqh  于 2023-04-21  发布在  Vue.js
关注(0)|答案(1)|浏览(163)

我有两个不同的Json数组

search_types: {
        0: { name: 'BEGIN ::..', svalue: 1 },
        1: { name: '..:: END', svalue: 2 }
      }

other_dummy_data: {
        0: { id_company: 25, name: 'SHIMIT Co.' },
        0: { id_company: 26, name: 'BIG SHIMIT Co.' },
      }

我有一个组件

<template>
    <select
      :id="input_id"
      :value="modelValue"
      @input="$event => $emit('update:modelValue', $event.target.value)"
      >
    <option v-for="get in optArr" 
      :value="get.opt_value<<-- THE PROBLEM IS HEREM >>" 
      :key="get">{{ get.opt_name <<-- THE PROBLEM IS HEREM  }}</option>
    </select>

</template>

<script>
export default {
  name: 'InputSelect',
  props: {
    optArr: Array,
    opt_value: String,
    opt_name: String,
    input_id: String,
    modelValue: String
  }
}
</script>

我想对两个不同的JSON数组使用相同的组件。但是在上面的例子中,每个JSON数组的〈〈THE PROBLEM IS HERE〉〉探测器是不同的。
我尝试了下面的方法,但我得到了错误。

<InputSelect 
v-model="sample_second_selected"
:optarr="search_types" 
:opt_name="name" 
:opt_value="svalue"/>

<InputSelect 
v-model="sample_selected"
:optarr="other_dummy_data" 
:opt_name="name" 
:opt_value="id_company"/>

你能帮个忙吗?提前感谢你的帮助。

wkyowqbh

wkyowqbh1#

首先,注意这是一个带有数字键的对象,而不是一个数组:

{
  0: { name: 'BEGIN ::..', svalue: 1 },
  1: { name: '..:: END', svalue: 2 }
}

这是一个数组:

[{ name: 'BEGIN ::..', svalue: 1 }, { name: '..:: END', svalue: 2 }]

JSON是一个字符串(包含JavaScriptOobjectNotation):

const json = '[{ "name": "BEGIN ::..", "svalue": 1 }, { "name": "..:: END", "svalue": 2 }]'

所以你所谓的JSON数组既不是JSON也不是数组。别担心,但这些术语是如此基本,你把它们弄对了会帮你自己一个大忙。
我认为你想传入对象或数组(Vue的v-for可以处理两者)和你循环的对象的属性名(在opt_name中)。
要通过对象的名称解析属性,请使用括号表示法,即在模板中,执行以下操作:

{{ get[opt_name] }}

如果opt_name是一个包含字符串"name"的变量,则myObject[opt_name]与写入myObject.name相同。
既然我在做聪明先生,还有一些提示:

  • get是一个不合适的对象名称,不仅仅是因为“get”是一个动词,而是因为它在编程中的特定含义(实际上我很惊讶它不是保留关键字)
  • :key必须是一个原语(基本上是字符串或数字),但您传入对象
  • 在Javascript中,习惯上对变量和属性使用camelCase,而不是snake_case -对于大多数开发人员来说,这不是可选的

希望能帮上忙

相关问题