vue-multiselect не отображает массив (опции: Array [0]) - PullRequest
Новая
       23

vue-multiselect не отображает массив (опции: Array [0])

0 голосов
/ 29 января 2019

Я пытаюсь добавить 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>
...