设置下拉菜单的默认选项并在VueJS中赋值

pu3pd22g 于 2023-03-24 发布在 Vue.js

关注(0)|答案(2)|浏览(169)

我有两个连接的下拉列表。您在第一个下拉列表中选择一种语言，与该语言相关的语音列表将出现在第二个下拉列表中。
我想在第一次加载页面时在第一个下拉列表中设置一个默认值，因为在加载时它是空的。
在视图中，我设置了:value="language"，但这在HTML标记中返回object Object。如果我将其设置为language.id，则声音将停止出现。

所有我想做的是设置“英语”作为默认选项时，页面加载和检索所选语言的正确的声音。
还有，有没有更好的方法来填充每种语言的默认语音，而不是setdropdown()，因为如果我有10种语言，那会很长。

data() {
    return {
        selected: '',
        selectedVoice: '',
        languages: [{
                "id": 1,
                "name": "English",
                "voices": [
                    {
                        "id": "en-jenny",
                        "name": "Jenny"
                    },
                    {
                        "id": "en-davis",
                        "name": "Davis"
                    }
                ]
            },
            {
                "id": 2,
                "name": "Spanish",
                "voices": [
                    {
                        "id": "es-lupe",
                        "name": "Lupe"
                    },
                    {
                        "id": "es-juan",
                        "name": "Juan"
                    },
                    {
                        "id": "es-miguel",
                        "name": "Miguel"
                    }
                ]
            }
        ],
    }
},

methods: {
    setdropdown() {
        if (this.selected.name == 'English') this.selectedVoice = 'en-jenny'
        else if (this.selected.name == 'Spanish') this.selectedVoice = 'es-lupe'
    }
},

这就是风景。

<select v-model="selected" class="form-control" @change="setdropdown()">
    <option v-for="(language, index) of languages" :key="index" :value="language">{{ language.name }}</option>
</select>

<select v-model="selectedVoice" class="form-control">
    <option v-for="(voice, index) of selected.voices" :key="index" :value="voice.id">{{ voice.name }}</option>
</select>

vue.js

来源：https://stackoverflow.com/questions/75767318/set-default-option-for-dropdown-and-assign-value-in-vuejs

2条答案

按热度按时间

alen0pnh1#

尝试以下方法：

<script>
export default {
  data() {
      return {
          selected: 1,
          selectedVoice: 'en-jenny',
          languages: [{
                  "id": 1,
                  "name": "English",
                  "voices": [
                      {
                          "id": "en-jenny",
                          "name": "Jenny"
                      },
                      {
                          "id": "en-davis",
                          "name": "Davis"
                      }
                  ]
              },
              {
                  "id": 2,
                  "name": "Spanish",
                  "voices": [
                      {
                          "id": "es-lupe",
                          "name": "Lupe"
                      },
                      {
                          "id": "es-juan",
                          "name": "Juan"
                      },
                      {
                          "id": "es-miguel",
                          "name": "Miguel"
                      }
                  ]
              }
          ],
      }
  },
   
  computed: {
    selectedVoices() {
      let selectedLanguage = this.languages.find(language => language.id === this.selected);
      return typeof selectedLanguage.voices !== 'undefined' ? selectedLanguage.voices : [];
    }
  },
  
  methods: {
    setDefaultValue() {
      this.selectedVoice = this.selectedVoices[0].id;
    }
  }

 }
</script>

<template>
  <div>
    <select v-model="selected" class="form-control" @change="setDefaultValue">
        <option v-for="language in languages" :key="language.id" :value="language.id">{{ language.name }}</option>
    </select>

    <select v-model="selectedVoice" class="form-control">
        <option v-for="voice in selectedVoices" :key="voice.id" :value="voice.id">{{ voice.name }}</option>
    </select>
  </div>
</template>

几点评论：
1.我建议你使用computed而不是method来获取语音
1.您可以在data或mounted hook中设置默认值
1.不要像使用key那样使用index，不推荐这样做，因为这样会影响性能，请使用迭代对象的某些属性

赞(0）回复(0）举报 2023-03-24

6kkfgxo02#

使用mounted()Lifecycle Hook

mounted() { 
  this.selected = this.languages[0];  
  this.setVoice();
}

对于setVoice()

setVoice() {
     this.selectedVoice = this.selected.voices[0].id;
 }

一个一个二个一个一个一个三个一个一个一个一个一个四个一个

赞(0）回复(0）举报 2023-03-24

我来回答

设置下拉菜单的默认选项并在VueJS中赋值

2条答案

相关问题

热门标签

最新问答