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
4 answers
solution1
2 ACCPTED 2019-07-22 15:51:00
尝试：
<v-checkbox :input-value="isSelected(row.id)"></v-checkbox>
solution2
1 2019-07-22 15:49:20
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>
solution3
0 2019-07-22 15:49:38
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>
solution4
0 2019-07-22 16:29:25
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 .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.