小编ret*_*ade的帖子

我很难理解如何在vue.js中的组件之间传递数据.我已经多次阅读过这些文档并查看了许多与vue相关的问题和教程,但我仍然没有得到它.

为了解决这个问题,我希望能帮助我们完成一个非常简单的例子

1. 显示一个组件中的用户列表(完成)
2. 单击链接(完成)时将用户数据发送到新组件 - 请参阅底部的更新.
3. 编辑用户数据并将其发送回原始组件(还没有到目前为止)

这是一个小提琴,在第二步失败:https://jsfiddle.net/retrogradeMT/d1a8hps0/

我知道我需要使用props将数据传递给新组件,但我不确定如何在功能上做到这一点.如何将数据绑定到新组件？

HTML:

    <div id="page-content">
       <router-view></router-view>
     </div>

 <template id="userBlock" >
   <ul>
     <li v-for="user in users">{{user.name}} - <a v-link="{ path: '/new' }"> Show new component</a>
     </li>
   </ul>
 </template>

  <template id="newtemp" :name ="{{user.name}}">
    <form>
      <label>Name: </label><input v-model="name">
      <input type="submit" value="Submit">
    </form>
  </template>

主要组件的js:

Vue.component('app-page', {
  template: '#userBlock',

  data: function() {
    return{

        users: []
      }
    },

ready: function () {
    this.fetchUsers();
},

methods: {
    fetchUsers: function(){
        var users = [
          {
            id: 1, …

我试图用.each()循环一个json对象,但我正在努力使语法正确.

Ajax调用,导致"未定义":

$('.showGroup a').on('click', function(e) {
e.preventDefault();
    var _href = $(this).attr("href");
     $.ajax({
       dataType: 'json',
       url : _href,
       type : 'GET',
       success : function(response) {
          $("#replace").empty();
          display = response;
        $.each(display, function(i, member) {
            alert(display[i].company_name);
        });
     },
    error : function() {
        console.log('error');
    }
  });
});

如果我只是呼叫警报(显示[i]); 我的json对象看起来像这样:

{"total":134,"per_page":15,"current_page":1,"last_page":9,"from":1,"to":15,"data":[{"id":"89","company_name":"test" ...

我也尝试嵌套另一个.each()循环,但我得到了响应:未捕获TypeError:无法使用'in'运算符来搜索'17381'

我已经查看了几个SO答案并尝试了各种样式的.each循环,但我总是得到一个未定义的错误.

我错过了什么？

编辑 我在后端构建像这样的json:

$members = $this->user->getMemberIds($loggedIn->id, $display, $associationFilter);
           $this->arrResponse['members'] = $members->toJson();
return Response::json($this->arrResponse);

我正在使用Laravel Vue设置并使用Laravel Elixir,Webpack和laravel-elixir-vue-2 软件包.

我已经查看了其他几个SO问题,我知道这通常是一个问题,没有引用独立版本的vue.js

但是,laravel-elixir-vue-2软件包将独立版本别名为vue,因此可以从.vue文件加载模板.不过,我每次都会收到此错误:

[Vue:Warn] vue 2.0 Failed to mount component: template or render function not defined. (found in component <top> at ../resources/assets/js/components/top.vue)

我可以看到vue.js正在从控制台中的vue/dist/vue.js？0598:2611中被拉入.

任何人都能看到我错过的东西吗？

app.js

import Vue from 'vue'
import top from './components/top.vue'

new Vue({
el: '#app',
components: { top }
})

//I've also tried this: 

// new Vue({
//  components: {
//    top
//  },
// render: h => h(top),
// }).$mount('#app')

top.vue

<template>
   <div class="top">
     <p>hi</p>
   </div>
</template>
<script>
 export default {};
</script>

index.blade.php …

我似乎误解了如何使用 ajax 调用将数据传递给 Vue.js 组件。

我对这应该如何工作的理解：

• 我需要在组件的数据部分创建一个名为活动的空对象。
• 然后在准备好替换数据对象的页面上调用方法“fetchCampaigns”。
• fetchCampaign 方法完成 AJAX 调用，并在成功回调内部使用 this.$set('campaigns', campaign) 将空的活动对象替换为新返回的活动对象
• 在模板上使用 v-for 遍历活动对象并使用 @{{campaign.type}} 访问值

我的 html（我使用 vue 路由器、vue 资源和 laravel 刀片）：

<router-view></router-view>

<template id="campaignBlock" v-for="campaign in campaigns">
                <div class="row">
                    <div class="block"> 

                <div class="block-title">
                     <h2>Type: <em>@{{campaign.id}}</em></h2>
                </div>

                <div class="row"><!-- Grid Content -->
                    <div class="hidden-sm hidden-xs col-md-4 col-lg-4">  
                        <h2 class="sub-header">@{{campaign.title}}</h2>
                    </div>
                </div>
            </div><!-- END Grid Content -->
</template>

组件

Vue.component('app-page', {
template: '#campaignBlock',

data: function() {
    return{
        campaigns: []
    }
  },

ready: function () {
    this.fetchCampaigns(); …

我正在迭代产品列表并将它们显示在卡片中。我想在每列出 18 个产品后显示一次促销：

<div
     v-for="(prod, index) in products"
       :key="index"
       class="w-full md:w-1/3 lg:w-1/4 xl:w-1/4 mb-8 px-2
     >
     <promotion v-if="(index % 18 == 0) && index != 0" ></promotion>
     <product-card v-else :product="prod"></product-card>
</div>

按照我现在编写的方式，会显示促销活动，但会将其插入具有匹配索引的项目的位置。如何将促销活动放置在第 n 个商品之前或之后而不替换它？

我得到了一个"对一个非对象的成员函数getClientOriginalExtension()的调用",尽管我已经找到了消除它的建议,包括在我的{{Form :: open}中添加'files'=> true }.

知道我走错了哪一步？

编辑 这里是我的路由

Route::resource('/contractors', 'ContractorController');
Route::controller('/contractors', 'ContractorController');
Route::post('/contractors/portfolio/{$id}', 'ContractorController@post_Portfolio');

这是我的控制器:

public function post_Portfolio($id)
    {

    $contractor = Contractor::find($id);
    $input = Input::all();
    $rules = array(
      'fileToUpload' => 'image|max:3000',
  );

  $validation = Validator::make($input, $rules);

  if ($validation->fails())
  {
    return Response::make($validation->errors->first(), 400);
  }
    $file = Input::file('filesToUpload');
    $destinationPath = 'uploads/portfolio';
    $extension = $file->getClientOriginalExtension(); 
    $filename = str_random(12).".{$extension}";
    $upload_success = Input::file('filesToUpload')->move($destinationPath, $filename);

    if( $upload_success ) { 

        //create a new portfolio and transfer the inputs to the db

        $portfolio = new Portfolio;
        $contractor = …