Как показать данные из массива объектов в списке?

100

21 октября 2021, 18:40

Есть функция, которая получает массив policies[]:

getPolicies() {
  let self = this;
  HttpService.methods.get('/policies')
    .then(function (response) {
      self.policies = response.data.data
      console.log(self.policies);
    })
    .catch(function (error) {
      console.log(error);
    })
}

И есть такое чекбокс меню:

<div class="dropdown-checkbox form-group">
  <label class="label-title"><p>Select</p></label>
  <ul>
    <li><label><input value="1" type="checkbox">1</label></li>
    <li><label><input value="2" type="checkbox">2</label></li>
    <li><label><input value="3" type="checkbox">3</label></li>
  </ul>
</div>

функция getPolicies отдаёт:

policies=[ { foo: 1, bar: 2}, { foo: 3, bar: 4}, { foo: 5, bar: 6} ]

Как показать данные из массива policies[] в меню для каждого элемента?

Answer 1

const app = new Vue({ 
  el: '#app', 
  data: { 
    policies: [ 
      { 
        foo: 1, 
        bar: 2, 
        checked: false, 
      }, 
      { 
        foo: 3, 
        bar: 2, 
        checked: true, 
      }, 
      { 
        foo: 5, 
        bar: 2, 
        checked: false, 
      }, 
    ], 
  }, 
  methods: { 
  }, 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> 
<div id="app"> 
  <template> 
    <div class="dropdown-checkbox form-group"> 
      <label class="label-title"><p>Select</p></label> 
      <ul> 
        <li v-for="polici, key in policies"> 
          <label> 
            <input 
              type="checkbox" 
              v-model="polici.checked" 
              :value="polici.checked" 
            > 
            {{polici.foo}} 
          </label> 
        </li> 
      </ul> 
    </div> 
  </template> 
</div>