如何使用 json 原始数据在 vuejs 中制作依赖的第二个列表？

Posted 2023-02-22

【中文标题】如何使用 json 原始数据在 vuejs 中制作依赖的第二个列表？

【英文标题】：how to make dependent second list in vuejs using json raw data?

【发布时间】：2021-08-31 06:46:36

【问题描述】：

所以我将州和地区列表存储在 .json 文件中。 我可以在第一个菜单中显示州列表，但无法在第二个下拉菜单中显示所选州的地区列表。

"locations":[  
   
    "state":"Andhra Pradesh",
    "districts":[  
       "Anantapur",
       "Chittoor",
       "East Godavari",
       "Guntur",
       "Krishna",
       "Kurnool",
       "Nellore",
       "Prakasam",
       "Srikakulam",
       "Visakhapatnam",
       "Vizianagaram",
       "West Godavari",
       "YSR Kadapa"
    ]
 ,
   
    "state":"Arunachal Pradesh",
    "districts":[  
       "Tawang",
       "West Kameng",
       "East Kameng",
       "Papum Pare",
       ........

我如何带来一个特定地区的列表？

<b-form-input
                  list="my-list-id-2"
                  v-model="memorial.location1"
                  required
                  :placeholder="$t('placeholdersMemorial.location1')"
                ></b-form-input>
                <datalist id="my-list-id-2">
                  <option v-for="location in $t('locations')" :key="location"> location.state </option>
                </datalist>
              </b-form-group>
            </b-col>

上面是我的第一个框，它列出了状态。

 <b-row class="justify-content-center">
           <b-col cols="8" sm="8">
              <b-form-group
                :label="$t('addMemorialForm.location2')"
              >
                <b-form-input
                  list="my-list-id-2b"
                  v-model="memorial.location2"
                   v-if="memorial.location1"
                  required
                  :placeholder="$t('placeholdersMemorial.location2')"
                ></b-form-input>
                <datalist id="my-list-id-2b">
                  <option v-for="location in $t('locations')" :key="locations"> locations.districts </option>
                </datalist>
              </b-form-group>
            </b-col>

上面是第二个盒子。我该如何解决这个问题？

【参考方案1】：

在这种情况下，您可以将区域数组添加为计算属性：

  computed: 
    availableDistricts () 
      if (this.memorial.location1) 
        const selectedState = this.$t('locations').find(loc => loc.state === this.memorial.location1);
        return selectedState.districts;
       else 
        return [];
      
    
  ,

然后像这样使用它：

   <datalist id="my-list-id-2b">
        <option v-for="district in availableDistricts" :key="district">district</option>
   </datalist>

【讨论】：

@redtape52 对不起，我在第二个 v-for 中犯了一个错误。请再检查一遍

不，它现在也不起作用。你能看看这里吗？ codesandbox.io/s/wispy-waterfall-f4o85?file=/src/components/…

@redtape52 好的，现在我明白了。再次检查答案，我修改了它

欢呼它可以工作，但是这个计算函数基本上是获取选定状态的索引值，然后它用它来获取区域的数组然后传递它？