(Vue.js) 如何使用数据中的数值数组中的选项标签填充选择标签？

Question

我想用包含数值数组的数组变量中的选项填充我的选择标记。 但是复制出来的值好像是空白的

HTML：

  <select required id="dropDown">
    <option>Select here</option>
    <option v-for="choice in choices">{{ choice }}</option>
  </select>

Javascript：

var vm = new Vue({   
el: 'body',    
data:{
    'choices': [1,2,3,4,5]
    }
});

有人可以指出我的错误吗？ 因为我只是一个初学者，我想向你们学习。

Answer 1

el选项应该为 Vue 提供一个现有的 DOM 元素来挂载。 您已经为 body 提供了一个 CSS 选择器，因此 Vue 将尝试挂载在body元素上。

否则你的代码是正确的。 只需将您的 HTML 包装在body标签中即可！

 var vm = new Vue({ el: 'body', data:{ 'choices': [1,2,3,4,5] } });

 <!-- Load Vue JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.js"></script> <!-- add body tags so `el: 'body'` resolves to an HTML element --> <body> <select required id="dropDown"> <option>Select here</option> <option v-for="choice in choices">{{ choice }}</option> </select> </body>

Answer 2

如果您从后端获取数据，则需要遵循另一种方式。 例如，我有一个来自后端的类别列表。

 <el-select
              v-model="categorySelect.selected"
              size="large"
              name="category_id"
              single
              v-bind:placeholder="$t('products.category')"
          >
            <el-option
                v-for="item in categorySelect.autocompleteItems"
                :key="item.id"
                :label="item.name_en"
                :value="item.id"
            ></el-option>
          </el-select>

您的脚本应如下所示：

categorySelect: {
    selected: [],
    autocompleteItems: this.categoriesItem,
  },

categoriesItem: {
      required: false,
      type: Object
    },

然后，您需要像这样在您的视图中获取数据：

:categories-item="{{$categories}}"

当您看到上面的代码时，您可以使用来自后端的不同列表填充您的选择列表。

享受您的代码！

(Vue.js) 如何使用数据中的数值数组中的选项标签填充选择标签？

问题描述

2 个解决方案

解决方案1
8 已采纳 2016-07-15 17:28:25

解决方案2
0 2021-06-06 11:48:43

(Vue.js) 如何使用数据中的数值数组中的选项标签填充选择标签？

问题描述

2 个解决方案

解决方案1 8 已采纳 2016-07-15 17:28:25

解决方案2 0 2021-06-06 11:48:43

解决方案1
8 已采纳 2016-07-15 17:28:25

解决方案2
0 2021-06-06 11:48:43