Question

我想用包含数值值数组的数组变量中的选项填充select标签。但是，再现的价值似乎是空白的

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代码中即可生效！

＆＃13;

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

＆＃13;

<!-- 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>

＆＃13;

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）如何使用数据中数字值数组中的option标签填充select标签？

2 个答案: