Checkbox with vue data array does not work. #1136

JaderCM · 2017-11-14T13:48:22Z

Steps to reproduce

JavaScript - Create a vue object with one property as an array;
HTML - Bind at least two md-checkbox using a v-model with the property of step 1 with different values (e.g. 1 and 2);
HTML - Show the value of the property of step 1;
Check one checkbox.

Which browser?

Google Chrome version 62.0.3202.89 64 bits using VueMaterial 1.0.0-beta-4

What is expected?

Only the checked checkbox should be marked and the content of the property matrix binded to the checkbox should contain only the value of the checked checkbox. If another checkbox is checked, the array must also contain the checked value.

In summary, the array property must contain the value that represents the checked checkboxes.

What is actually happening?

Old version of VueMaterial: When any checkbox is checked all is checked (https://jsfiddle.net/JaderCM/2wt85dt5/)
Version 1.0.0-beta-4 of VueMaterial: The checkbox component is not rendered.

Reproduction Link

https://jsfiddle.net/JaderCM/2wt85dt5/7/

marcosmoura · 2017-11-14T16:24:22Z

I will take a deep look. Have you tried this on a actual project or just on Codepen?

JaderCM · 2017-11-14T16:27:43Z

I would like to use in my current project. For now, I'm working in a alternative to this using md-button-toggle. So, for now I only have this example in a JSFiddle.

Samuell1 · 2017-11-14T16:48:38Z

Looks like jsfiddle have trouble to load Vue material

marcosmoura · 2017-11-14T17:01:53Z

The codepen examples are broken. I'm fixing this right now.

JaderCM · 2017-11-15T10:32:25Z

@Samuell1 even in browser, if we use the vue-material@beta with external references the same error occurs.

<script type="text/javascript" src="https://unpkg.com/vue-material@beta"></script>

JaderCM · 2017-11-15T13:10:25Z

@marcosmoura I found my error using the previous version of beta version. It's necessary use md-value instead value.

http://jsfiddle.net/JaderCM/2wt85dt5/14/

marcosmoura · 2017-11-16T15:12:42Z

Can you check this now? Because the old version works with md-value, but the new one is value.

JaderCM · 2017-11-20T21:16:52Z

@marcosmoura could you tell me what's the url of the new version? The url https://unpkg.com/vue-material@beta throw an exception.

Samuell1 · 2017-11-23T20:17:15Z

Use codepen: https://codepen.io/Samuellsk/pen/gXKPYE?&editors=111#

JaderCM · 2017-11-23T23:38:56Z

Sorry @Samuell1 but this is not the solution. The reproduction link keep with the problem.

The example that I wrote represents my scenario. If I need do something in this reproductions steps to solve the problem, could you tell me exactly what I should do please?

JaderCM · 2017-11-24T10:41:46Z

@Samuell1 below is the same code that you wrote in codepen and not works for me. Could you tell me where I'm wrong please?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/vuematerial/vue-material/master/dist/default-theme.css">
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-material@beta"></script>
    <style>
.md-checkbox {
  display: flex;
}
table {
  width: 100%;
  table-layout: fixed;

  th {
    text-align: left;
  }
}
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <md-checkbox v-model="array" value="1">Array</md-checkbox>
        <md-checkbox v-model="array" value="2">Array</md-checkbox>
        <md-checkbox v-model="boolean">Boolean</md-checkbox>
        <md-checkbox v-model="string" value="my-checkbox">String</md-checkbox>
        <md-checkbox v-model="novalue">No Value</md-checkbox>
        <md-checkbox v-model="disabled" disabled>Disabled</md-checkbox>
        <table>
          <tr>
            <th>Array</th>
            <th>Boolean</th>
            <th>String</th>
            <th>No Value</th>
          </tr>
          <tr>
            <td>{{ array }}</td>
            <td>{{ boolean }}</td>
            <td>{{ string }}</td>
            <td>{{ novalue }}</td>
          </tr>
        </table>
      </div>
    </div>
    <script>
Vue.use(VueMaterial.default)

const example = 
{
  name: 'RegularCheckboxes',
  data: () => ({
    array: [],
    boolean: false,
    string: null,
    novalue: null,
    disabled: true
  })
}

new Vue({
  name: 'root',
  el: '#app',
  ...example
})
    </script>
  </body>
</html>

Samuell1 · 2017-11-24T10:50:08Z

Its not same, try adding https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js as script

JaderCM · 2017-11-24T10:52:13Z

Same problem:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  	<link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
  	<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/vuematerial/vue-material/master/dist/default-theme.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-material@beta"></script>
    <style>
.md-checkbox {
  display: flex;
}
table {
  width: 100%;
  table-layout: fixed;

  th {
    text-align: left;
  }
}
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <md-checkbox v-model="array" value="1">Array</md-checkbox>
        <md-checkbox v-model="array" value="2">Array</md-checkbox>
        <md-checkbox v-model="boolean">Boolean</md-checkbox>
        <md-checkbox v-model="string" value="my-checkbox">String</md-checkbox>
        <md-checkbox v-model="novalue">No Value</md-checkbox>
        <md-checkbox v-model="disabled" disabled>Disabled</md-checkbox>
        <table>
          <tr>
            <th>Array</th>
            <th>Boolean</th>
            <th>String</th>
            <th>No Value</th>
          </tr>
          <tr>
            <td>{{ array }}</td>
            <td>{{ boolean }}</td>
            <td>{{ string }}</td>
            <td>{{ novalue }}</td>
          </tr>
        </table>
      </div>
    </div>
    <script>
Vue.use(VueMaterial.default)

const example = 
{
  name: 'RegularCheckboxes',
  data: () => ({
    array: [],
    boolean: false,
    string: null,
    novalue: null,
    disabled: true
  })
}

new Vue({
  name: 'root',
  el: '#app',
  ...example
})
    </script>
  </body>
</html>

Samuell1 · 2017-11-24T10:55:30Z

Script needs to have type="text/babel"

JaderCM · 2017-11-24T10:57:40Z

Same problem:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/vuematerial/vue-material/master/dist/default-theme.css">
    <script type="text/babel" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-material@beta"></script>
    <style>
.md-checkbox {
  display: flex;
}
table {
  width: 100%;
  table-layout: fixed;

  th {
    text-align: left;
  }
}
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <md-checkbox v-model="array" value="1">Array</md-checkbox>
        <md-checkbox v-model="array" value="2">Array</md-checkbox>
        <md-checkbox v-model="boolean">Boolean</md-checkbox>
        <md-checkbox v-model="string" value="my-checkbox">String</md-checkbox>
        <md-checkbox v-model="novalue">No Value</md-checkbox>
        <md-checkbox v-model="disabled" disabled>Disabled</md-checkbox>
        <table>
          <tr>
            <th>Array</th>
            <th>Boolean</th>
            <th>String</th>
            <th>No Value</th>
          </tr>
          <tr>
            <td>{{ array }}</td>
            <td>{{ boolean }}</td>
            <td>{{ string }}</td>
            <td>{{ novalue }}</td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/babel">
Vue.use(VueMaterial.default)

const example = 
{
  name: 'RegularCheckboxes',
  data: () => ({
    array: [],
    boolean: false,
    string: null,
    novalue: null,
    disabled: true
  })
}

new Vue({
  name: 'root',
  el: '#app',
  ...example
})
    </script>
  </body>
</html>

Could you past here the code that works for you please?

Samuell1 · 2017-11-24T10:59:04Z

that type needs to be only on javascript code not at source file

JaderCM · 2017-11-24T11:01:14Z

I tried both before post. Could you write here the code that works please?

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/vuematerial/vue-material/master/dist/default-theme.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-material@beta"></script>
    <style>
.md-checkbox {
  display: flex;
}
table {
  width: 100%;
  table-layout: fixed;

  th {
    text-align: left;
  }
}
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <md-checkbox v-model="array" value="1">Array</md-checkbox>
        <md-checkbox v-model="array" value="2">Array</md-checkbox>
        <md-checkbox v-model="boolean">Boolean</md-checkbox>
        <md-checkbox v-model="string" value="my-checkbox">String</md-checkbox>
        <md-checkbox v-model="novalue">No Value</md-checkbox>
        <md-checkbox v-model="disabled" disabled>Disabled</md-checkbox>
        <table>
          <tr>
            <th>Array</th>
            <th>Boolean</th>
            <th>String</th>
            <th>No Value</th>
          </tr>
          <tr>
            <td>{{ array }}</td>
            <td>{{ boolean }}</td>
            <td>{{ string }}</td>
            <td>{{ novalue }}</td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/babel">
Vue.use(VueMaterial.default)

const example = 
{
  name: 'RegularCheckboxes',
  data: () => ({
    array: [],
    boolean: false,
    string: null,
    novalue: null,
    disabled: true
  })
}

new Vue({
  name: 'root',
  el: '#app',
  ...example
})
    </script>
  </body>
</html>

Samuell1 · 2017-11-24T11:03:47Z

I using codepen. Do you get any errors in console?

JaderCM · 2017-11-24T11:06:55Z

I'm not using codepen because I need work with this framework in my workspace. Every time show the same error message:

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at s (vue-material.min.js:1)
    at vue-material.min.js:1
    at Object.defineProperty.value (vue-material.min.js:1)
    at t (vue-material.min.js:1)
    at Object.defineProperty.value (vue-material.min.js:1)
    at t (vue-material.min.js:1)
    at Object.defineProperty.value (vue-material.min.js:1)
    at t (vue-material.min.js:1)
    at Object.defineProperty.value (vue-material.min.js:1)
    at t (vue-material.min.js:1)
    at Object.defineProperty.value (vue-material.min.js:1)
    at t (vue-material.min.js:1)
    at Object.g (vue-material.min.js:1)
    at t (vue-material.min.js:1)
    at e.exports.e (vue-material.min.js:1)
    at vue-material.min.js:1
    at n (vue-material.min.js:1)
    at vue-material.min.js:1

Samuell1 · 2017-11-24T11:35:13Z

I checked it and there is issues with babel

SyntaxError: embedded: Unexpected token (20:2)
browser.js:2028:13

Line 20:2 is ...example
Looks like browsers doesnt like destructuring objects

Working example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
  	<link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
  	<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/vuematerial/vue-material/master/dist/default-theme.css">
    <style>
.md-checkbox {
  display: flex;
}
table {
  width: 100%;
  table-layout: fixed;

  th {
    text-align: left;
  }
}
    </style>
  </head>
  <body>
    <div id="app">
      <div>
        <md-checkbox v-model="array" value="1">Array</md-checkbox>
        <md-checkbox v-model="array" value="2">Array</md-checkbox>
        <md-checkbox v-model="boolean">Boolean</md-checkbox>
        <md-checkbox v-model="string" value="my-checkbox">String</md-checkbox>
        <md-checkbox v-model="novalue">No Value</md-checkbox>
        <md-checkbox v-model="disabled" disabled>Disabled</md-checkbox>
        <table>
          <tr>
            <th>Array</th>
            <th>Boolean</th>
            <th>String</th>
            <th>No Value</th>
          </tr>
          <tr>
            <td>{{ array }}</td>
            <td>{{ boolean }}</td>
            <td>{{ string }}</td>
            <td>{{ novalue }}</td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/vue-material@beta"></script>
    <script type="text/babel">
Vue.use(VueMaterial.default);

new Vue({
  name: 'root',
  el: '#app',
  data: () => ({
    array: [],
    boolean: false,
    string: null,
    novalue: null,
    disabled: true
  })
});
    </script>
  </body>
</html>

JaderCM · 2017-11-24T11:58:26Z

@Samuell1 thank you for your help. In fact the problem is with vue-material. If I only move the reference of vue-material to the end works:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link type="text/css" rel="stylesheet" href="https://unpkg.com/vue-material@beta/dist/vue-material.min.css">
    <link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/vuematerial/vue-material/master/dist/default-theme.css">
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <div>
        <md-checkbox v-model="array" value="1">Array</md-checkbox>
        <md-checkbox v-model="array" value="2">Array</md-checkbox>
        <table>
          <tr>
            <th>Array</th>
          </tr>
          <tr>
            <td>{{ array }}</td>
          </tr>
        </table>
      </div>
    </div>
    <script type="text/javascript" src="https://unpkg.com/vue-material@beta"></script>
    <script>
Vue.use(VueMaterial.default);

new Vue({
  name: 'root',
  el: '#app',
  data: () => ({
    array: []
  })
});
    </script>
  </body>
</html>

Samuell1 · 2017-11-24T12:01:20Z

@JaderCM problem was with destructing example object

JaderCM mentioned this issue Nov 14, 2017

Roadmap for Vue Material beta! #1081

Open

marcosmoura self-assigned this Nov 14, 2017

marcosmoura added the bug label Nov 14, 2017

Samuell1 closed this as completed Nov 23, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Checkbox with vue data array does not work. #1136

Checkbox with vue data array does not work. #1136

JaderCM commented Nov 14, 2017

marcosmoura commented Nov 14, 2017

JaderCM commented Nov 14, 2017

Samuell1 commented Nov 14, 2017

marcosmoura commented Nov 14, 2017

JaderCM commented Nov 15, 2017

JaderCM commented Nov 15, 2017

marcosmoura commented Nov 16, 2017

JaderCM commented Nov 20, 2017

Samuell1 commented Nov 23, 2017

JaderCM commented Nov 23, 2017 •

edited

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017 •

edited

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017 •

edited

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

Checkbox with vue data array does not work. #1136

Checkbox with vue data array does not work. #1136

Comments

JaderCM commented Nov 14, 2017

Steps to reproduce

Which browser?

What is expected?

What is actually happening?

Reproduction Link

marcosmoura commented Nov 14, 2017

JaderCM commented Nov 14, 2017

Samuell1 commented Nov 14, 2017

marcosmoura commented Nov 14, 2017

JaderCM commented Nov 15, 2017

JaderCM commented Nov 15, 2017

marcosmoura commented Nov 16, 2017

JaderCM commented Nov 20, 2017

Samuell1 commented Nov 23, 2017

JaderCM commented Nov 23, 2017 • edited

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017 • edited

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017 • edited

JaderCM commented Nov 24, 2017

Samuell1 commented Nov 24, 2017

JaderCM commented Nov 23, 2017 •

edited

Samuell1 commented Nov 24, 2017 •

edited

Samuell1 commented Nov 24, 2017 •

edited