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, Oct 20 '17 at 06:17
Yes, that's how it's written in the docs as well: https://vuejs.org/v2/guide/forms.html — Ismail Rashad, Oct 20 '17 at 06:38
`permissionsSelected` should be an array, as written in the docs. — Eric Guan, Oct 20 '17 at 07:00
in your case it's a string, so change it to`permissionsSelected: []` — ljubadr, Oct 20 '17 at 07:11
I would recommend you to look into [this answer](https://stackoverflow.com/questions/29308441/using-javascript-to-display-laravels-variable), to pass permissions into var permission = ..., and to use that with vue, so you don't have blade foreach mix with vue — ljubadr, Oct 20 '17 at 07:21
also in laravel blade, if you want to use vue templating, you need to look into [this docs](https://laravel.com/docs/5.5/blade#blade-and-javascript-frameworks) — ljubadr, Oct 20 '17 at 07:23
@ljubadr worked when I changed :custom-value to value do you know what's the difference between them exactly? also yea I changed permissionsSelected into an array — Ismail Rashad, Oct 20 '17 at 07:29
You can add this `Checked permissions: @{{ permissionsSelected }}` before you close the `
` to see the difference — ljubadr, Oct 20 '17 at 07:54

score 1 · Accepted Answer · answered Oct 20 '17 at 07:44

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>

VueJS Form Input Binding

1 Answers1