Question

我有一个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>`

measure.js

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

我怎么能：

使用vuejs从数据库中检索数据
使用vue js

Answer 1

看起来你正在混合一些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（假设你正在使用ajax调用的vue-resource库），比如：

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（不要忘记返回以这种方式编码的数组并设置正确的header）错误的对象数组将显示在控制台中，并且在成功时，数组将被分配给pos javascript变量并在HTML中更新，从而反复创建相应的选项！

如果您没有使用root选项配置vue-resource（Vue.http.options.root），则可能需要更新添加root的URL

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

1 个答案: