如何在关联数组中用v-for列出项目?归纳

问题描述 投票:0回答:1

我不知道该如何列举 itemsv-for 联想到 array.

不知道如何通过 key'sarray's 然后列出 titles.

找到了很多例子,但没有找到熟悉的例子。

语言选择比较多,但只发了几个,大家可以了解一下。

阵列::

data: () => ({
        translations: [
            {
                'lt': {
                    title: 'Lithuanian',
                },
                'en': {
                    title: 'English',
                }
            }
        ],
})

HTML。

<select v-model="activeLanguage">
  <option v-for="(translation, key) in translations" :value="key">
    {{translation.title}}
  </option>
</select>

如何指定 key 然后显示 titles 在...中 v-for 并在 HTML option 标签?

javascript html arrays vue.js vuejs2
1个回答
1
投票
<option v-for="(translation, key) in translations[0]" :value="key">
  {{ translation.title }}
</option>

1
投票

你应该遍历 translations[0] 而不是。下面是一个例子。

new Vue({
  el: "#app",
  data() {
    return {
         activeLanguage:null,
         translations: [
            {
                'lt': {
                    title: 'Lithuanian',
                },
                'en': {
                    title: 'English',
                }
            }
        ],
    };
  },
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
     <select v-model="activeLanguage">
          <option v-for="(translation, key) in translations[0]" :value="key">
                {{translation.title}}
          </option>
     </select>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.