我有两个不同的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"/>
你能帮个忙吗?提前感谢你的帮助。
1条答案
按热度按时间wkyowqbh1#
首先,注意这是一个带有数字键的对象,而不是一个数组:
这是一个数组:
JSON是一个字符串(包含JavaScriptOobjectNotation):
所以你所谓的JSON数组既不是JSON也不是数组。别担心,但这些术语是如此基本,你把它们弄对了会帮你自己一个大忙。
我认为你想传入对象或数组(Vue的
v-for
可以处理两者)和你循环的对象的属性名(在opt_name
中)。要通过对象的名称解析属性,请使用括号表示法,即在模板中,执行以下操作:
如果
opt_name
是一个包含字符串"name"
的变量,则myObject[opt_name]
与写入myObject.name
相同。既然我在做聪明先生,还有一些提示:
get
是一个不合适的对象名称,不仅仅是因为“get”是一个动词,而是因为它在编程中的特定含义(实际上我很惊讶它不是保留关键字):key
必须是一个原语(基本上是字符串或数字),但您传入对象希望能帮上忙