Vuejs : suggestions component in table row - vue.js

Question

I am trying to use autocomplete component "v-suggestions", from https://www.npmjs.com/package/v-suggestions
Want to use in tab row in a loop, since i want to create multiple select boxes, please see the code
<tr
v-for="ingredient in ingredients"
v-bind:key="ingredient.id"
>
<!-- https://www.npmjs.com/package/v-suggestions -->
<td>
<suggestions
v-model="query.suggestions"
:options="options"
:onInputChange="onSelectIngredient">
</suggestions>
</td>
<td>
<input
type="text"
class="form-control"
id=""
v-model="items.quantity"
/>
</td>
<td>
export default {
data() {
let ingredients_auto = ['Onion', 'Salt', 'Oil', 'Sugar']
return {
items: [
{ id: 0, item_name: "x", quantity: "" },
{ id: 1, item_name: "y", quantity: "" },
{ id: 2, item_name: "y", quantity: "" }
],
query: '',
ingredients_auto: ingredients_auto,
ingredients_selected: null,
options: {}
};
methods: {
onSelectIngredient (query) {
if (query.trim().length === 0) {
return null
}
// return the matching countries as an array
return this.ingredients_auto.filter((item) => {
return item.toLowerCase().includes(query.toLowerCase())
})
}
}
I am getting below error in console , any idea why I am see this issue , I think there are issue with v-model, not sure how to fix this
vue.runtime.esm.js?2b0e:1888 TypeError: Cannot use 'in' operator to search for 'suggestions' in Salt
at Proxy.set (vue.runtime.esm.js?2b0e:1076)
at callback (eval at ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"d52508de-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js?!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/views/AddDish.vue?vue&type=template&id=646fb311&scoped=true& (app.b02fcecff20360dbbc44.hot-update.js:11), <anonymous>:189:45)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
at VueComponent.query (v-suggestions.js?c4f6:1)
at Watcher.run (vue.runtime.esm.js?2b0e:4568)
at flushSchedulerQueue (vue.runtime.esm.js?2b0e:4310)
at Array.eval (vue.runtime.esm.js?2b0e:1980)

Answer 1

You had couple of mistakes I have rectified go through this
<template>
<table>
<tr
v-for="ingredient in ingredients"
v-bind:key="ingredient.id"
>
<td>
<suggestions
v-model="queries[ingredient.id]"
:options="options"
:onInputChange="onSelectIngredient">
</suggestions>
<!-- note the queries array, each item in it binds to a unique item in ingredients array -->
</td>
<td>
<input
type="text"
class="form-control"
id=""
v-model="ingredient.quantity"
/>
</td>
</tr>
</table>
</template>
<script>
import suggestions from 'v-suggestions'
export default {
name: 'demo',
components: {
suggestions
},
// using component locally, but if want to use globally use Vue.use(suggestions)
data() {
let ingredients_auto = ['Onion', 'Salt', 'Oil', 'Sugar']
let q = [];
for(var i=0; i<ingredients_auto.length; i++) {
q.push('');
}
//since we want queries array to be same length as of ingredients/ingredients_auto
return {
dish_name: "",
ingredients: [
{ id: 0, item_name: "Salt", quantity: "" },
{ id: 1, item_name: "Pepper", quantity: "" },
{ id: 2, item_name: "Oil", quantity: "" }
],
error: "",
selected:[],
units: ['gms', 'pound', 'kgs', 'ml', 'nos', 'liter'],
query: '',
ingredients_auto: ingredients_auto,
ingredients_selected: null,
options: {},
queries: q
};
},
methods: {
onSelectIngredient (query) {
if (query.trim().length === 0) {
return null
}
// return the matching countries as an array
return this.ingredients_auto.filter((item) => {
return item.toLowerCase().includes(query.toLowerCase())
})
}
}
}
</script>
Note that I have made a dynamic array q which I copy to queries because you want each individual textbox to behave independently so typing in one textbox should not affect the text contained in other textboxes

Answer 2

#viney see the
I didn't added that portion, let me add
export default {
data() {
let ingredients_auto = ['Onion', 'Salt', 'Oil', 'Sugar']
return {
dish_name: "",
ingredients: [
{ id: 0, item_name: "Salt", quantity: "" },
{ id: 1, item_name: "Pepper", quantity: "" },
{ id: 2, item_name: "Oil", quantity: "" }
],
error: "",
selected:[],
units: ['gms', 'pound', 'kgs', 'ml', 'nos', 'liter'],
query: '',
ingredients_auto: ingredients_auto,
ingredients_selected: null,
options: {}
};