VUEjs模板多個選擇框

因此，我被分配在工作中使用vue，但VUE和我還不是朋友。目前，我面臨着一個我不知道如何解決的問題 - 我將用我有限的VUE知識盡我所能解釋這一問題。VUEjs模板多個選擇框

簡單地我有一個VUE組件，它看起來是這樣的：

Vue.component('input-checkboxes', { 
    template: '#input_checkboxes', 
    props: ['id', 'label', 'list', 'required', 'readonly'] 
});

然後，我有一個模板，看起來像這樣：

<template id="input_checkboxes"> 

    <div> 
     <div>{{ label }}</div> 
     <div> 

      <label v-for="list_item in list"> 

       <input type="checkbox" v-model="value" :name="id" :required="required" :readonly="readonly" value="{{ list_item.name }}"> {{ list_item.name }} 
      </label> 

     </div> 
    </div> 

</template>

然後，我有一個相當大的VUE情況下，我將粘貼這裏的相關部分。

正在創建此變量：

var some_form = { 
    form : { 
     Endless: '', 
     Amounts: '', 
     Of: '', 
     Names: '', 
     In: '', 
     The: '', 
     Form: '', 
     THIS-ONE: '' 
    } 
}; 


var vm = new Vue({ 
    el: '#form_product', 
    data: $.extend({ 
     someStuff : 'some values', 
     someLists : {} 
    }, some_form), 
    ready: function() { 
     this.getLists(); // Fetches alot of lists 
    }, 
    methods: { 
     this.$http.get(
      framework.url('api','getLookupLists') 
     ).then(function (response) { 

      this.lists = response.body; 
      this.pageLoading = false; 
     }.bind(this)); 
    }

最後，我有我的HTML頁面，除其他領域，工作得非常好，負荷有這樣的：

<input-checkboxes 
    id="THIS-ONE" 
    label="A Fitting Label" 
    :value.sync="form.SomeID" 
    :list="lists.AnAppropriateList"> 
</input-checkboxes>

所以，這是設置的要點。我有許多其他組件，如輸入文本，工作得很好（別人之前做過），我甚至通過複製他的方式創建其他組件，只是改變一些元素。

我不能讓複選框起作用，我認爲我的問題是有很多輸入，而且我不知道如何將這些輸入的結果綁定到我的VUE實例。

我真的希望這是有道理的，因爲我真的很喜歡關於如何繼續下去的一些指針......也許如果有人重複這個設置非常簡單，並顯示了複選框的值數組如何綁定到vue實例？

來源

2016-12-06 John Lajer

什麼是不具約束力？輸出是什麼？你能設置一個小提琴嗎？ – jaredsk

您有（或可能）犯了一些錯誤。

首先，價值支撐你傳下去必須是一個數組（好像就像是從您的示例字符串）
value設置不正確，你需要做:value="someValue"設置它;你不能在屬性中使用curlies。
最後，值應該可能是項目的ID而不是名稱。如果您使用該名稱，則有可能發生相撞。
- 獎勵：你並不需要在所有使用:name（除非您提交表單服務器端...但我不明白你爲什麼要這麼做？）

這裏有一個簡單的工作示例來總結這件事：

HTML

var app = new Vue({ 
    el: 'main', 
    data: function() { 
    return { 
     value: [], 
     label: 'Label name', 
     readonly: false, 
     required: true, 
     list: [ 
     { 
      name: 'Item 1', 
      id: 'item1' 
     }, 
     { 
      name: 'Item 2', 
      id: 'item2' 
     } 
     ] 
    } 
    } 
})

，我也做了a bin讓你嘗試一下。

來源

2016-12-06 21:23:49

謝謝你的回覆，我會看看它 - 但今天我很忙，所以這將是幾天，對此感到抱歉... –

VUEjs模板多個選擇框

回答

相關問題