CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Liga
Liga

Reputation: 3439

How to bind input value to the return output of a method in Vue.js?

I am using a Vuetify checkbox component and I am trying to bind it's value to the output of my method but it is not working at all. I have tried it with a computed property but I could not pass and argument to it. And it is also not working if I use a method. Is there a way to dynamically assign a value to an input like this?

<div v-for="row in rows">
    <v-checkbox :value="isSelected(row.id)"></v-checkbox>
</div>

data()
{
    return {
        rows: [{id: 22546}, {id: 3521}, {id: 15698}],
        selected: [1259, 1898, 3521]
    }
},

methods:
{
    isSelected(id)
    {
        if (this.selected.indexOf(id) > -1) {
            return true
        } else {
            return false
        }
    }
}

When I tried with v-model instead if :value it gave me this error:

<v-checkbox v-model="isSelected(row.id)"></v-checkbox>

isSelected(id)
{
  return true
},

error

[Vue warn]: Failed to generate render function:

SyntaxError: missing ) after argument list in

Upvotes: 1

Views: 2493

Answers (4)

DedaDev
DedaDev

Reputation: 5249

Ok, I figure it out,

v-model is 2-way binding, you can only bind it to variable or computed property with getter and setter. value provided by vue-checkbox component is not the value of checkbox checked/unchecked state. You can set initial state with :input-value.

Upvotes: 0

Abdelillah Aissani
Abdelillah Aissani

Reputation: 3108

It works fine with v-model make sure your app is nested inside v-app tag : 

Vue.config.productionTip = false;
Vue.config.devtools = false;

new Vue({ el: '#app',
data()
{
    return {
        rows: [{id: 22546}, {id: 3521}, {id: 15698}],
        selected: [1259, 1898, 3521]
    }
},

})
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <div v-for="(row,i) in rows">
         <v-checkbox 
          v-model="selected[i]" 
         :label="`${selected[i] > -1 ? true : false} `"
          ></v-checkbox>
      </div>
    </v-app>
   </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>

</body>
</html>

Upvotes: 0

Constantin Trepadus
Constantin Trepadus

Reputation: 503

Try with:

<v-checkbox :input-value="isSelected(row.id)"></v-checkbox>

Upvotes: 3

antonku
antonku

Reputation: 7665

You can use v-model with getter that encapsulates the logic that decides if checkbox needs to be checked:

let id = 1898;

new Vue({
  el: '#app',
  data() {
    return {
      rows: [{id: 22546}, {id: 3521}, {id: 15698}],
      selected: [1259, 1898, 3521]
    }
  },
  computed: {
    val: {
      get: function() {
        return this.selected.indexOf(id) > -1;
      },
      set: function(newValue) {
        console.log(newValue);
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id='app'>
<div v-for="row in rows">
    <v-checkbox v-model="val"></v-checkbox>
</div>
</div>

Upvotes: 1

Related Questions