My Objective:
- I need to utilize multiple select elements
- Every time an option is selected, it should be added to a keyword array
- Each keyword should then be displayed in a "tag" component
- These tags should be removable, resulting in the removal of the associated keywords
Note: This is linked with Laravel and Blade templates, hence the @ before the mustache syntax.
Template
<select @change="switchType">
<option v-for="type in types" value="@{{ type.value }}">@{{ type.text }}</option>
</select>
...
<tag v-for="keyword in keywords" model="@{{ keyword.model }}" identifier="@{{ keyword.id }}" text="@{{ keyword.text }}"></tag>
JS
const API_TYPES = '/api/types';
var vm = new Vue({
el: '.search',
data: {
types: [],
type: null,
keywords: [],
},
ready: function() {
this.$http.get(API_TYPES).then(function(types) {
this.$set('types', types.body)
});
},
methods: {
search: function() {
if (this.type) {
this.keywords.push({
model: 'type',
identifier: this.type.id,
text: this.type.name
})
}
},
switchType: function(event) {
var self = this
var value = event.target.value
console.log(value)
this.$set('type', {id: value, name: event.target[value].text})
self.search()
},
},
components: {
'tag': {
template: `
<span class="tag is-warning is-medium">
{{ model }} {{ identifier }} {{ text }}
<button class="delete is-small" @click="removeTag"></button>
</span>
`,
props: [
'model',
'identifier',
'text'
],
methods: {
removeTag: function () {
this.$el.remove()
}
}
}
}
})
In summary: I am aiming to achieve something similar to this, but encountering issues with sending data for the yellow pill item despite successful creation.
Where could I be going wrong? As I am relatively new to this data-driven approach, any inconsistencies in my code would be greatly appreciated. Thank you!