Uniapp 提取品牌-小米-8+128 配置信息

<template>
  <div>
    <div v-for="(brand, index) in inputs" :key="index">
      <div v-if="brand.name === '品牌'">
        <div v-for="(value, i) in brand.values" :key="i">
          <div v-if="value.name === '小米'">
            <div v-for="(config, j) in inputs" :key="j">
              <div v-if="config.name === '配置'">
                <div v-for="(option, k) in config.values" :key="k">
                  <div v-if="option.name === '8+128'">
                    <p>品牌：{{brand.name}}-{{value.name}}</p>
                    <p>配置：{{config.name}}-{{option.name}}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputs: [
        {
          name: '品牌',
          price: '',
          values: [
            {
              name: '小米',
              price: '',
              values: []
            },
            {
              name: '',
              price: '',
              values: []
            }
          ]
        },
        {
          name: '配置',
          price: '',
          values: [
            {
              name: '8+128',
              price: '',
              values: []
            }
          ]
        },
        {
          name: '',
          price: '',
          values: [
            {
              name: '',
              price: '',
              values: []
            }
          ]
        }
      ]
    };
  }
};
</script>
<p>在模板中使用 v-for 遍历 inputs 数组，根据对象的 name 属性来判断是否是品牌或配置，然后再通过 v-for 遍历子数组，找到对应的选项。最后把品牌和配置的信息显示在页面上。</p>