Hey there, I'm new to using Vue Js and I'm facing an issue with selecting a dropdown option from a form. The options are displayed as checkboxes within a div, and when a checkbox is selected, a chip should appear with the label of the checkbox. However, currently, the checkbox is automatically being selected and the chips are appearing without user interaction. Ideally, the chips should only display after selecting a checkbox and deselecting the checkbox should remove the chip. Unfortunately, this is not happening as expected. Below is the code snippet, any help would be appreciated.
<template>
<div id="app">
<v-layout row wrap>
<v-flex v-for="chip in chips" xs12 sm4 md4>
<v-checkbox :label="chip.name" v-model="chip.text"></v-checkbox>
// checkbox not working
</v-flex>
<div class="text-xs-center">
<v-select
:items="dataArr"
v-model="sensorDM"
label="Select"
class="input-group--focused"
item-value="text"
@change="call(sensorDM)"
></v-select>
<v-chip
v-for="tag in chips"
:key="tag.id"
v-model="tag.text"
close
>
{{ tag.name }}
</v-chip>
<br>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'Creation',
data: () => ({
chips: [{
id: 1, text: 'Device 1', name: 'Device 1'
}, {
id: 2, text: 'Device2', name: 'Device 2'
}],
chip1: false,
chip2: true,
dataArr: []
}),
created () {
let self = this
axios.get('http://localhost:4000/api/devices')
.then(function (response) {
self.fData(response.data.result)
})
},
methods: {
fData: function (message) {
let self = this
message.forEach(function (el, i) {
self.dataArr.push(el.sDM.name)
})
},
call (mes) {
let self = this
axios.get('http://localhost:4000/api/part1/Models/' + mes)
.then(function (res) {
self.resObj = res.data.response
self.resObj.forEach(function (el, i) {
el['text'] = el.name
el['isOpen'] = 'false'
})
self.chips = self.resObj
})
},
submit(){
console.log('hjkh')
}
}
}
I have made some changes to the code and included the call function within the created() method.