Question

我正在尝试将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>

vue-multiselect不显示数组（选项：数组[0]）

0 个答案: