vuejs組件中的綁定屬性

我想用Laravel 5.3的vuejs的最後一個版本！我想要實現的想法是創建一個用戶組件。爲了讓我列出所有用戶，並且對其中一個用戶有一個「編輯」按鈕，當我單擊此按鈕時，我應該看到用於更新此用戶的表單。所以我這是怎麼定義的組件：vuejs組件中的綁定屬性

<script> 
new Vue({ 
    el: '.view-wrap', 
    components: { 
    user-view: { 
     template: '#user-view', 
     props: ['user'] 
    } 
    }, 
    data: { 
    users: <?php echo json_encode($users); ?>, 
    }, 
    methods: { 
    showForm: function(number){ 
     $('div.update-user-'+number).css({'display':'block'}); 
     }, 

    getClassName: function (index) { 
     return "update-user-"+index; 
    }, 

    getUpdateUrl: function(id){ 
     return '/users/update/'+id; 
    }, 
    }   
});

這是「用戶視圖」，這需要一個類名「updateClass」，它包含了每一個用戶的ID（用於顯示模板/隱藏的目的），一個「器updateURL」，這是URL更新用戶與各種形式的行動，最終目標用戶將它綁定：

<template id="user-view"> 
    <div> 
    <div class="updateclass"> 
     <form class="form-horizontal" method="PUT" action="updateUrl"> 
     {{ csrf_field() }} 
     <ul> 
      <li> 
      <label for="name"> Name </label> 
      <input type="text" name="name" :value="user.name"> 
      </li> 
      <li> 
      {!! Form::submit('Save', ['class' => 'button-green smaller right']) !!}     
      </li> 
     </ul> 
    {!! Form::close() !!} 
</div>

，這是最後我如何調用模板：

<user-view v-for="user in users" :updateclass="getClassName(user.id)" :user="user" :updateUrl="getUpdateUrl(user.id)"></user-view>

然後將問題：它似乎例如[類=「updateclass」]作爲在被綁定到模板呼叫定義不與getClassName（user.id）的結果改變updateclass的值。當我在模板中用[：class =「updateclass」]嘗試它時：實例或方法「updateclass」未在實例上定義...

並且同樣的事情適用於所有其他綁定屬性。

來源

2016-12-06 arakibi

您用於動態分配類的語法是錯誤的。從getClassName方法，你必須返回其類名像這樣的對象：{"className: true}，像下面

getClassName: function (index) { 
     var tmp = {} 
     var className = 'update-user-'+index 
     tmp[className] = true 
     return tmp 
    }

比你能像下面將其指定爲在documentation：

<div :class="updateclass"></div>

來源

2016-12-06 14:18:47 Saurabh

這一行返回{「更新-user - 「+ index：true}生成：未捕獲的SyntaxError：意外的令牌+ – arakibi

@arakibi對不起，更新了答案。 – Saurabh

vuejs組件中的綁定屬性

回答

相關問題