VueJS Form Input Binding

Question

Hey so I'm a beginnerin Vue and I only encountered this problem when I used the foreach loop
Issue: Whenever I select any checkbox all get selected.

create.blade.php

  @foreach ($permissions as $permission)
              <li class="list-group-item bold">
                  <input type="checkbox" id="{{$permission->id}}"
                  :custom-value="{{$permission->id}}" v-model="permissionsSelected">
                  <label for="{{$permission->id}}">{{$permission->display_name}}
                  <em>{{$permission->description}}</em></label>
              </li>
            @endforeach
          </ul>
    <input type="hidden" name="permissions" :value="permissionsSelected">



<script>
 var app = new Vue({
   el: '#app',
   data: {
     permissionsSelected: ''
   }
 });
</script>

all checkboxes have same model v-model="permissionsSelected" that's why they all change together — ljubadr
– ljubadr, Commented Oct 20, 2017 at 6:17
Yes, that's how it's written in the docs as well: vuejs.org/v2/guide/forms.html — Ismail Rashad
– Ismail Rashad, Commented Oct 20, 2017 at 6:38
permissionsSelected should be an array, as written in the docs. — Eric Guan
– Eric Guan, Commented Oct 20, 2017 at 7:00
in your case it's a string, so change it topermissionsSelected: [] — ljubadr
– ljubadr, Commented Oct 20, 2017 at 7:11

ljubadr · Accepted Answer · 2017-10-20 07:44:10Z

Your problems seems to be that <input> was missing :value="..". Also permissionsSelected should be an array: permissionsSelected: []

I would recommend you not to mix laravel blade @foreach with vue.

Instead pass $permissions to javascript and render the list with vue. You can look how to do that in this answer

One more thing, from laravel documentation

Since many JavaScript frameworks also use "curly" braces to indicate a given expression should be displayed in the browser, you may use the @ symbol to inform the Blade rendering engine an expression should remain untouched

And here is your updated example

<div id="app">
  <ul>
    <li class="list-group-item bold" v-for="permission in permissions">
      <input
        type="checkbox"
        :id="permission.id"
        :value="permission.id"
        v-model="permissionsSelected"
      >
      <label :for="permission.id">@{{ permission.display_name }}
        <em>@{{ permission.description }}</em>
      </label>
    </li>
  </ul>
  <input type="hidden" name="permissions" :value="permissionsSelected">
</div>

<script>
  var permissions = JSON.parse("{{ json_encode($permissions) }}");

  var app = new Vue({
    el: '#app',
    data: {
      permissions: permissions,
      permissionsSelected: [],
    }
  });
</script>

Collectives™ on Stack Overflow

VueJS Form Input Binding

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related