I was searching whole internet but that didn't help me to resolve issue. With this code below I'm encountering 'Uncaught ReferenceError: VueSelect is not defined' What's wrong with the code?
var productForm = Vue.createApp ({
data: function() {
return {
product: {
sku: 0,
name: 'asdf',
price: 0
}
}
}
})
productForm.component('custom-form', {
props: ['value', 'options'],
template: `
<label>SKU<input type="text" :value=this.sku></label>
<label>Name<input type="text" :value=this.name></label>
<label>Price<input type="text" :value=this.price></label>
<vue-select :options="options" label="option"
></vue-select>
` ,
data: function() {
return {
sku: 0,
name: 'asdf',
price: 0,
options: [
{ option: "Size" },
{ option: "Weight" },
{ option: "Dimensions" }
]
}
}
})
const vm = productForm.mount('#product_form')
vm.component('vue-select', VueSelect )
Anyway, I managed successfully to do following without VueSelect:
var productForm = Vue.createApp ({})
productForm.component('custom-form', {
template: `
<label>SKU<input type="text" v-model="this.product.sku"></label>
<label>Name<input type="text" v-model="this.product.name"></label>
<label>Price<input type="text" v-model="this.product.price"></label>
<label>Attributes<select v-model="selected">
<option
v-for="item in options"
>{{item}}
</option>
</select></label>
` ,
data: function() {
return {
product: {
sku: 0,
name: 'asdf',
price: 0
},
options: ['Size', 'Weight', 'Dimensions'],
selected: 'Size'
}
}
})
productForm.mount('#product_form')