0

我正在尝试将 a 添加vue-multiselect到现有表单中，但是下拉列表为空。这不仅仅是一个显示问题，因为 Vue devtools 显示我的数组是空的。我在控制台中没有任何问题。

我的选择值来自我的 API，我 99% 确定我的代码可以正常工作，因为它与我在应用程序的其他地方使用的显示相同值的循环完全相同。

我正在使用 Nux.js。

遵循关于 SO 的文档和其他问题，我觉得我与下面的代码非常接近，但一定有什么不对劲，我只是无法发现它。

html

<template>
  <section class="container">
    <div>
      <h1>Gins</h1>
      <form @submit.stop.prevent="addGin">
        <h2>New Gin</h2>
        <p>
            <label for="gin_name" class="input-label">Title:</label>
            <input id="gin_name" v-model="gin_name" type="gin_name" name="gin_name" class="input">
        </p>
        <p>
            <label for="description" class="input-label">Description:</label>
            <input id="description" v-model="description" type="description" name="description" class="input">
        </p>
          <div>
            <label for="distillery" class="input-label">Distillery:</label>
            <multiselect
                v-model="distillery_id"
                track_by="id"
                :options="options"
                :searchable="true"
                placeholder="Choose One Distillery"
                >
            </multiselect>
        </div>
        <p>
            <input type="submit" value="Submit" class="button">
        </p>
      </form>
    </div>
  </section>
</template>

javascript

<script>
import axios from 'axios'
import Multiselect from 'vue-multiselect'

export default {

  components: { Multiselect },
  data() {
    return {
      gin_name: '',
      description: '',
      distillery_id: '',
      options: []
    }
  },

  methods: {

    addGin() {
      axios.post('http://localhost:4000/api/v1/gins', {
        gin_name: this.gin_name, description: this.description
      })
        .then((response) => {})
    },
    getDistilleries() {
      axios.get('/api/v1/distilleries')
        .then((res) => {
          this.options = res.data
        })
        .catch((error) => {
          console.log(error)
        })
    }
  }
}
</script>
4

0 回答 0