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

Question

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

Yes, that also did not work, it was giving me this error: [Vue warn]: Failed to generate render function: SyntaxError: missing ) after argument list in — Liga
– Liga, Commented Jul 22, 2019 at 15:31
@ConstantinTrepadus yes, I just updated the question with code — Liga
– Liga, Commented Jul 22, 2019 at 15:38

Constantin Trepadus · Accepted Answer · 2019-07-22 15:51:00Z

3

Try with:

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

answered Jul 22, 2019 at 15:51

Constantin Trepadus

5133 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Liga Over a year ago

This worked for me! Thank you very much @Constantin Trepadus

antonku · Accepted Answer · 2019-07-22 15:49:20Z

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>

Abdelillah Aissani · Accepted Answer · 2019-07-22 16:07:04Z

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>

DedaDev · Accepted Answer · 2019-07-22 16:29:25Z

0

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.

answered Jul 22, 2019 at 16:29

DedaDev

5,2792 gold badges26 silver badges32 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related