VUEjs шаблоны несколько selectboxes

Question

Итак, мне поручено работать с vue на работе, но VUE и я еще не друзья. В настоящее время я сталкиваюсь с проблемой, которую я не знаю, как ее решить - я объясню это как можно лучше с ограниченными знаниями VUE, которыми владею.

Упрощенно У меня есть компонент 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 пример?

Answer 1

Есть несколько ошибок, которые вы совершаете (или можете быть).

1. Прежде всего, значение проп вы передаете вниз должен быть массивом (кажется , как это строка из вашего примера)
2. value не правильно, вы должны установить его, выполнив :value="someValue" ; вы не можете иметь завитки в атрибуте.

3. И, наконец, значение должно быть идентификатором элемента, а не имени. У вас есть вероятность столкновения, если вы используете имя.

   • Бонус: вам не нужно использовать :name вообще (если вы не подаете на стороне сервера формы ... Но я не могу понять, почему вы могли бы сделать это?.)

Вот простой рабочий пример, чтобы подвести этот итог:

HTML

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

JS

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 для вас, чтобы попробовать.