Блог

У меня есть элемент select, и на основе выбора данные должны быть извлечены на основе выбранного идентификатора.

шаблон блейда

  <div id="pers_obj" class="form-group form-duration-div">
            {{Form::label("personal_objective", "Personal Objective/KPA")}}
            <select name="personal_objective" id="personal_objective" v-model="personal_objective">
                <option value="0" class="form-control">--Select Objective--</option>
                @foreach($personal_objectives as $personal_objective)
                <option value="{{ $personal_objective->id }}" class="form-control">{{ $personal_objective->name}}</option>
                @endforeach
            </select>   
            <div v-cloak>@{{personal_objective}}</div>
        </div>`
  

measure.js

 var pers_objective = new Vue({
el: '#pers_obj',
data:{
    personal_objective: null
},
});
  

Как я могу:

1. извлечение данных из базы данных с помощью vuejs
2. отображение данных из базы данных с помощью vue js

Похоже, вы немного смешиваете код PHP и JavaScript, пытаясь на удачу. Лучший способ — создать ответ службы для достижения личных целей, таких как API.

Итак, предположим, что вы создаете контроллер, вызываемый, например, по /personal-objectives адресу, который возвращает массив объектов со структурой { id: number, name: string }

Тогда ваш код для HTML будет выглядеть следующим образом:

 <div id="pers_obj" class="form-group form-duration-div">
  <select name="personal_objective" v-model="personal_objective">
    <option value="0" class="form-control">--Select Objective--</option>
    <option v-for="po in pos" value="@{{ po.id }}" class="form-control">@{{ po.name }}</option>
  </select>
</div>
  

И ваш JavaScript (при условии, что вы используете библиотеку vue-resource для вызовов ajax), например:

 var pers_objective = new Vue({
  el: '#pers_obj',
  data: function() {
    return {
      personal_objective: null,
      pos: [];
    };
  }

  created: function() {
    this.loadPersonalObjectives();
  }

  methods: {
    loadPersonalObjectives: function() {
      this.$http.get('personal-objectives').then((response) => {
        this.pos = response.data.pos;

      }, (response) => {
        console.log(response);
      });
    }
  }
});
  

Приведенный выше код выполнит GET вызов ajax при создании компонента, для /personal-objectives которого будет возвращен массив объектов в формате JSON (не забудьте вернуть массив, закодированный таким образом, и установить соответствующий заголовок), который при ошибке будет отображен в консоли, а при последующем массив будет присвоен pos переменной javascript и обновлен в HTML, реактивно создавая соответствующие опции!

Возможно, вам потребуется обновить URL-адрес, добавив root / в случае, если вы не настраиваете vue-ресурс с опцией root (Vue.http.options.root)