Получить выбранное значение vue-bootstrap-typeahead (vue.js, laravel) - PullRequest
Новая
       31

Получить выбранное значение vue-bootstrap-typeahead (vue.js, laravel)

0 голосов
/ 08 ноября 2019

Я использую https://github.com/alexurquhart/vue-bootstrap-typeahead в проекте Laravel.

Я использую этот инструмент, чтобы получить список городов из пользовательского API.

Он работает хорошо, но есть что-тоя не могу сделатьМожет быть, это действительно просто, но я новый пользователь Vue.js и не понимаю, как это сделать.

Я хочу получить SelectedCommune , чтобы заполнить некоторые поляна моей странице. И я понятия не имею, как это получить. Я пытаюсь переопределить методы hit (или handhit), но не работает.

Это мой код: 

const template = `
<div>

  <vue-bootstrap-typeahead
    class="mb-4"
    v-model="query"
    :data="communes"
    :serializer="item => item.commune"
    @hit="selectedCommune = $event"
    placeholder=""
    />
    <input type="hidden" name="commune_id" id="commune_id" :value="selectedCommune.id"/>


</div>
`

new Vue({
  template,
  components: {
    VueBootstrapTypeahead
  },
  data() {
    return {
      query: '',
      selectedCommune: [],
      communes: []
    }
  },
  watch: {
    // When the query value changes, fetch new results from
    // the API - in practice this action should be debounced
    query(newQuery) {
      axios.get(`/api/communes/?commune=${newQuery}`)
        .then((res) => {
          this.communes = res.data
          this.communeId = res.data.id
          //console.log(selectedCommune)
        })
    }
  },
  filters: {
    stringify(value) {
      return JSON.stringify(value, null, 2)
    }
  },
  methods:{
    hit(evt) {
      if (typeof this.value !== 'undefined') {
        console.log(evt.text);
        this.$emit('input', evt.text)
      }
      console.log(evt.text);
      this.inputValue = evt.text
      this.$emit('hit', evt.data)
      this.$refs.input.blur()
      this.isFocused = false
    }
  }
}).$mount('#vue_commune_autocomplete')

Может быть, я должен сделать это с Jquery вне моего Vue? Каков наилучший способ?

Бонусный вопрос: мне нужно заполнить скрытый ввод {{old ('commune_id')}}, но, поскольку я не в лезвии, я не могу. Как мы можем это сделать?

Спасибо

...