For the past few days, I've been diving into Vue.JS and attempting to create an app that adds a chip when a button is clicked. The chips should display the value from an input field as their name. I've created a method that is supposed to create these chips, but for some reason it's not being called. I've even tried using console.log at the beginning of the method to troubleshoot...
Appreciate any help!
Here's my App.vue:
<template>
<v-app id="whole_container">
<v-content id="main_container">
<v-row id="main_row">
<v-col class="hellocol" id="chips">
<customChip name="Louis"></customChip>
</v-col>
<v-col class="hellocol" id="chipField">
<addChip></addChip>
</v-col>
</v-row>
</v-content>
</v-app>
</template>
<script>
import customChip from './components/chip.vue';
import addChip from './components/addChip.vue';
export default {
name: 'App',
components: {
customChip,
addChip
},
data: () => ({
//
}),
};
</script>
My AddChip file:
<template>
<div>
<v-text-field id="newChip" :outlined="true" label="Enter a name" placeholder="Michel" v-model="currentName"></v-text-field>
<p>My name is {{ currentName }}</p>
<chipButton @click="addChip( currentName )"></chipButton>
</div>
</template>
<script>
import chipButton from './button.vue';
export default {
data: () => ({
currentName: ""
}),
components: {
chipButton,
},
methods: {
addChip: function(name) {
console.log(name);
let actualChips = document.getElementById('chips');
let newChip = document.createElement('customChip');
newChip.name = name;
actualChips.appendChild('newChip');
}
}
}
</script>