Question

我有一个列出所有国家/地区的json字符串，例如：

AC:"Ascension Island"
AD:"Andorra"
AE:"United Arab Emirates"
AF:"Afghanistan"
AG:"Antigua & Barbuda"

我通过get请求获取值并将它们分配给如下数组：

        axios.get('/countries')
            .then(response => {
                this.countries = response.data;
            })


    data: function () 
    {
        return {
            countries: [],

但是当我使用以下内容时，页面没有加载，我没有收到错误：

<select class="selectpicker" data-live-search="true" v-model="location" v-for="(value, key) in countries">  
    <option value="{{ key }}">{{ value }}</option>
</select>

Answer 1

您可以使用

在vue中执行此操作

<select class="selectpicker" data-live-search="true" v-model="location">
    <option :value="key" v-text="value" v-for="(value, key) in countries"></option>
</select>

请注意，无论你把v-for放在哪里，都是在DOM中重复的元素。在您的示例中，它将创建多个选择标记

Answer 2

将v-for移动到选项标签。以前是同样的事情

从json字符串访问vuejs中的值和键

2 个答案: