Php 使用vuejs和laravel从数据库获取数据

我有一个select元素，根据所选内容，将根据所选id检索数据

刀片模板

 <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>`

我怎样才能：

使用vuejs从数据库检索数据

使用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>

当组件被创建为

/personal objectives

时，上面的代码将发出一个ajax

GET

调用，该调用将返回一个JSON（不要忘记返回以这种方式编码的数组并设置正确的头）对象数组，一旦出错，该数组将显示在控制台中，成功后，数组将被分配给

pos

javascript变量，并在HTML中更新，从而创建相应的选项

如果未使用root选项（vue.http.options.root）配置vue资源，则可能需要更新添加root/的URL

---

看起来您正在混合一些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>

当组件被创建为

/personal objectives

时，上面的代码将发出一个ajax

GET

调用，该调用将返回一个JSON（不要忘记返回以这种方式编码的数组并设置正确的头）对象数组，一旦出错，该数组将显示在控制台中，成功后，数组将被分配给

pos

javascript变量，并在HTML中更新，从而创建相应的选项

如果未使用root选项（vue.http.options.root）配置vue资源，则可能需要更新添加root/的URL

---

向我们展示如何实现处理ajax调用的控制器向我们展示如何实现处理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);
      });
    }
  }
});