小编Phi*_*ers的帖子

我有一个有助于过滤数据的功能.我在v-on:change用户更改选择时使用,但我甚至需要在用户选择数据之前调用该函数.我AngularJS以前使用过的方法也一样,ng-init但据我所知,没有这样的指令vue.js

这是我的功能:

getUnits: function () {
        var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status};

        this.$http.post('/admin/units', input).then(function (response) {
            console.log(response.data);
            this.units = response.data;
        }, function (response) {
            console.log(response)
        });
    }

在blade文件中我使用刀片表单来执行过滤器:

<div class="large-2 columns">
        {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!}
    </div>
    <div class="large-3 columns">
        {!! Form::select('unit_type', $unit_types,null, ['class'=>'form-control', 'placeholder'=>'All Unit Types', 'v-model'=>'unit_type', 'v-on:change'=>'getUnits()' ]) !!}
    </div>

当我选择特定项目时,此工作正常.然后,如果我点击所有让我们说all floors,它的工作原理.我需要的是当页面加载时,它调用getUnits将执行$http.post空输入的方法.在后端,我已经处理了请求,如果输入为空,它将提供所有数据.

我怎么能这样做 …

我在Laravel有一条路线,需要一个id作为参数.

Route::get('/example/{id}', ExampleController@index)

如果我将Laravel控制器中的数据传递给视图值,我会像这样传递:

<a href="/example/{{id}}" class="button success">Click</a>

但我id的vue价值是:

<tr v-for="item in items">
            <td>@{{ item.id }}</td>
            <td>@{{ item.name }}</td>
            <td>@{{ item.number }}</td>
            <td>@{{ item.address}}</td>
            <td v-if="item.status==0"><a href="/example/@{{item.id}}" class="button success">Click</a></td>
        </tr>

这是正确的方法吗？

如果您有两个模型 Post 和 Comment，并且在 Comment 模型中您定义了一个belongsTo()，称为posts 的关系，我知道可以这样做：

App\Comment::find(1)->posts()->where('category', 3)->get()

但我想要的是将多个主键 id 传递给 find 方法，例如：

App\Comment::find([1,2,3])->posts()->where('category', 3)->get()

或者

App\Comment::findMany([1,2,3])->posts()->where('category', 3)->get()

这两个给了我错误method posts does not exist。那么我还能如何处理这个问题呢？

我不想删除重复的值,我想获取articles_id重复项并将其数量值相加,例如,这是我的集合:

Collection {#306 ?
  #items: array:3 [?
    0 => CartLine {#294 ?
      +quantity: 2
      +article_id: 1728
      +article_name: "TAZA CERAMICA"
    }
    1 => CartLine {#296 ?
      +parent_line_id: null
      +quantity: 1
      +article_id: 1728
      +article_name: "TAZA CERAMICA"
    }
    2 => CartLine {#298 ?
      +quantity: 1
      +article_id: 1378
      +article_name: "JARRA CERVEZA ALEMANA"

    }
  ]
}

我希望得到这个结果:

Collection {#306 ?
  #items: array:3 [?
    0 => CartLine {#294 ?
      +quantity: 3 //sum total quantity of the duplicates elements with same article_id
      +article_id: 1728
      +article_name: "TAZA CERAMICA" …

我正在尝试在 .vue 组件中使用光滑的滑块，但出现错误。

.slick 不是一个函数

我已经完成了所有设置要求。这是我使用的代码：

    new Vue({
    el: '#app',
    data: {
        slider: null
    },
    methods: {
        selectImage: function () {
            //http call here
            return images
        }
    },
    mounted: function () {
        this.slider = $('.gallery').slick({
            animation: true
        });
    }
});

<div class='gallery'>
  <div v-for="img in images" @click="selectImage(img)">
    <img v-bind:src="img.url">
  </div>
</div>

我的 phpstorm 不允许 ES6，我怀疑这可能是问题所在。

这是我的代码的小提琴：JSfiddle

我正在使用 vue multiselect，我需要我的选项来自 api。当我使用官方文档中的示例时，它可以工作。

import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: [
        { name: 'Vue.js', language: 'JavaScript' }
      ],
      options: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Adonis', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' },
        { name: 'Sinatra', language: 'Ruby' },
        { name: 'Laravel', language: 'PHP' },
        { name: 'Phoenix', language: 'Elixir' }
      ]
    }
  }
}

但是如果我用我的数据替换选项它会失败

data: function () {
            return {
                value: [], …

我意识到在.vue 单文件组件中使用Zurb Foundation类时存在问题。起初，我无法让Reveal Modal在 中工作，但当我在或文件中使用相同的代码时，它可以工作。然后我注意到一个模式，因为当我尝试在组件内使用Foundation 的 Orbit时，它失败了，起初我认为这是一个错误，但后来我在文件中使用了相同的代码并且它起作用了。其他基础类，如、和都工作得很好。.vue componentbladehtmlbladerowgridbuttons

有人遇到过同样的问题吗？我该如何解决这个问题？

这是模式的代码：

<a data-open="video" class="button warning" href="">WATCH VIDEO</a>

<div id="video" class="reveal" data-reveal>
    <div class="lead">
        <button class="close-button" data-close aria-label="Close modal" type="button">
            <span aria-hidden="true">&times;</span>
        </button>
    </div>
    <div class="flex-video">
        <iframe width="1280" height="720" :src="url" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

对于轨道，我使用基础文档中的基本示例进行测试。

    <div class="orbit" role="region" aria-label="Favorite Space Pictures" data-orbit>
  <ul class="orbit-container">
    <button class="orbit-previous"><span class="show-for-sr">Previous Slide</span>&#9664;&#xFE0E;</button>
    <button class="orbit-next"><span class="show-for-sr">Next Slide</span>&#9654;&#xFE0E;</button>
    <li class="is-active orbit-slide">
      <img class="orbit-image" src="assets/img/orbit/01.jpg" …